jQuery实现滚动效果


Posted in jQuery onNovember 17, 2017

本文实例为大家分享了jQuery实现滚动效果展示的具体代码,供大家参考,具体内容如下

1. 图片轮播:

原理如下:

jQuery实现滚动效果

假设有三张图片,三张图片实际上都是存在于页面上的,但是由于设置的可视部分的大小(这里主要考虑宽度)是小于等于一张图片的大小的,想要看到其他图片的话,最直接的想法就是将需要显示的图片放在可视区域,也就是说需要改变的是整个图片区域的偏移值(left/right)

具体实现:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <script type="text/javascript" src="jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="./style.css" rel="external nofollow" >
</head>
<body>
 <div class="carousel">
 <div class="Con">
 <!-- 轮播(carousel)项目 -->
  <div class="scroll">
  <img src="./pic/1.jpg">
  <img src="./pic/2.jpg">
  <img src="./pic/3.jpg">
  <img src="./pic/4.jpg">
  <img src="./pic/5.jpg">
  <img src="./pic/6.jpg">
  <img src="./pic/7.jpg">  
  </div>

  <!-- 轮播(carousel)指标 -->
  <div class="But">
  <span class="active"></span> <!-- 0 * img.width -->
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </div> 
 </div>

 <!-- 轮播(carousel)导航 -->
 <a href="javascript:void(0)" class="prev" data-slide="prev"> << </a>
 <a href="javascript:void(0)" class="next" data-slide="next"> >> </a>
 </div>
</body>
</html>
$(function() {
 var _index = 0;
 var time = 0;
 $(".But span").click(function() {
 _index = $(this).index();
 play(_index);
 });

 function play(index) {
 $(".But span").eq(index).addClass('active').siblings('span').removeClass('active');
 $('.scroll').animate({left: -(_index*1024)}, 500);
 }

 function autoPlay() {
 time = setInterval(function() {
 _index++;
 if(_index > 6) {
 $('.scroll').css("left", 0);
 _index = 0;
 }
 play(_index);
 }, 3000);
 }
 autoPlay();
 $('.prev').click(function() {
 if(_index <= 0) {
 return;
 }
 clearInterval(time);

 play(--_index);
 autoPlay();
 });
 $('.next').click(function() {
 if(_index >= 6) {
 return;
 }
 clearInterval(time);
 play(++_index);
 autoPlay();
 });  
});

2. 上下滚动

这里以文字滚动为示例:就是利用定时器,在一定的时间间隔后不断的将ul中的最后一个li元素插入到ul的第一个li元素中

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <script type="text/javascript" src="jquery.min.js"></script>
 <style type="text/css">
 .ul-list li {
 text-decoration: none;
 list-style: none;
 }
 </style>
</head>
<body>
 <ul class="ul-list">
 <li><a href="#">本地数据正反查询的实现例子</a></li>
 <li><a href="#">A-star寻路算法</a></li>
 <li><a href="#">node.js的querystring.stringify的使用</a></li>
 <li><a href="#">利用事件委托写一个简易扫雷游戏</a></li>
 <li><a href="#">懒加载(延迟加载)</a></li>
 <li><a href="#">JS中XML的解析</a></li>
 </ul>
 <script type="text/javascript">
 setInterval(function() {
 $('.ul-list li:last').css({'height':'0px', 'opacity':"0"}).insertBefore(".ul-list li:first").animate({'height':'25px', 'opacity': '1'}, 'slow', function() {
 $(this).removeAttr('style');
 })
 }, 3000);
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery实现评论模块
Aug 19 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
基于jQuery实现定位导航位置效果
Nov 15 #jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 #jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 #jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 #jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 #jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 #jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 #jQuery
You might like
discuz7 phpMysql操作类
2009/06/21 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
layui的select联动实现代码
2019/09/28 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
Python随机数random模块使用指南
2016/09/09 Python
python基础教程之Filter使用方法
2017/01/17 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
python 基于opencv去除图片阴影
2021/01/26 Python
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
运动会领导邀请函
2014/02/05 职场文书
活动总结模板
2014/05/09 职场文书
主题团日活动总结
2014/06/25 职场文书
小学社会实践活动总结
2014/07/03 职场文书
初中班主任教育随笔
2015/08/15 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
golang内置函数len的小技巧
2021/07/25 Golang