jQuery动画效果实现图片无缝连续滚动


Posted in Javascript onJanuary 12, 2016

本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下

效果图如下:

jQuery动画效果实现图片无缝连续滚动

一、HTML代码

<body> 
  <div id="container"> 
    <ul id="content"> 
      <li><a href="#"><img src="images/0.png"/></a></li> 
      <li><a href="#"><img src="images/1.png"/></a></li> 
      <li><a href="#"><img src="images/tewu.png"/></a></li> 
      <li><a href="#"><img src="images/2.png"/></a></li> 
      <li><a href="#"><img src="images/tewu.png"/></a></li> 
      <li><a href="#"><img src="images/3.png"/></a></li> 
      <li><a href="#"><img src="images/4.png"/></a></li> 
    </ul> 
  </div> 
</body>

1. id为container的div是最外层的包装,用来控制滚动区域显示的具体位置。
2. id为content的ul用来包装那些需要滚动的图片。

3. li元素就是用来包装具体的图片。

二、CSS代码

*{margin: 0; padding: 0;} 
 
img{ 
  border:0; 
} 
 
#container{ 
  width:800px; 
  height: 130px; 
<span style="white-space:pre">  </span>margin:100px auto; 
  border:3px solid blue; 
  overflow: hidden; 
  position: relative; 
} 
 
#container ul{ 
  list-style: none; 
  width:10000px; 
  position: absolute; 
} 
 
#container ul li{ 
  float:left; 
  margin-right: 20px; 
}

这里说明一点,ul 的 width为什么设置为10000px。 因为无缝连续滚动的实现原理,就是在现有显示图片的基础上克隆一份,并且拼接在显示图片的后面,但由于显示图片的总宽度是未知的,所以为了安全性,最好将ul的width宽度设置比较大些。

三、无缝连续滚动原理分析

jQuery动画效果实现图片无缝连续滚动

四、JQuery实现代码

<script type="text/javascript"> 
/* window.onload比 $(function(){}) 加载的更晚一些,这样那些宽度的计算在Chrome中就可以准确计算了*/  
  window.onload = function(){ 
 
    /*计算一个segment的宽度*/ 
 
    var segmentWidth = 0; 
    $("#container #content li").each(function(){ 
      segmentWidth+= $(this).outerWidth(true); 
    }); 
 
    $("#container #content li").clone().appendTo($("#container #content")); 
 
    run(6000); 
 
    function run(interval){ 
      $("#container #content").animate({"left":-segmentWidth}, interval,"linear",function(){ 
        $("#container #content").css("left",0); 
        run(6000); 
      }); 
    } 
 
    $("#container").mouseenter(function(){ 
      $("#container #content").stop(); 
    }).mouseleave(function(){ 
      var passedCourse = -parseInt($("#container #content").css("left")); 
      var time = 6000 * (1 - passedCourse/segmentWidth); 
      run(time); 
    }); 
  }; 
     
</script>

1. 先通过each遍历所有的li元素,计算出它们宽度之和。
2. 拷贝一份图片到现有图片的后面,原理分析图的"图一"所示。

3. 设置6秒钟滚动完界面上面现有的图片,滚动完毕后,通过设置content的left值,将其整体拉回到初始状态,原理分析图的"图二"所示。然后递归调用run方法,完成无限滚动。

4. 当鼠标经过滚动区域的时候,动画立刻停止; 当鼠标离开的时候,动画继续执行。

关于动画继续执行的代码,如下图分析:

jQuery动画效果实现图片无缝连续滚动

以上就是jQuery实现图片无缝连续滚动的代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JQuery循环滚动图片代码
Dec 08 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
javascript基础知识
Jun 07 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
jqueryMobile使用示例分享
Jan 12 #Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 #Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 #Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 #Javascript
JavaScript继承模式粗探
Jan 12 #Javascript
轻松实现Bootstrap图片轮播
Apr 20 #Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 #Javascript
You might like
PHP Token(令牌)设计
2008/03/15 PHP
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
JavaScript prototype属性深入介绍
2012/11/27 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
python 读取DICOM头文件的实例
2018/05/07 Python
如何解决python多种版本冲突问题
2020/10/13 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
大学生毕业求职的自我评价
2013/09/29 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
质检部经理岗位职责
2014/02/19 职场文书
房展策划方案
2014/06/07 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书