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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jQuery实现手风琴特效
Jan 11 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
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
JS Array对象入门分析
2008/10/30 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
python机器学习实战之树回归详解
2017/12/20 Python
python实现比较文件内容异同
2018/06/22 Python
Python读写zip压缩文件的方法
2018/08/29 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
pandas DataFrame运算的实现
2020/06/14 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
python中round函数保留两位小数的方法
2020/12/04 Python
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
编程输出如下图形
2013/11/24 面试题
《哪吒闹海》教学反思
2014/02/28 职场文书
高中课程设置方案
2014/05/28 职场文书
课外活动实习计划
2015/01/19 职场文书
人力资源部岗位职责
2015/02/11 职场文书
校园新闻稿范文
2015/07/18 职场文书
2016教师节感恩话语
2015/12/09 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python