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 相关文章推荐
javascript fullscreen全屏实现代码
Apr 09 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
探讨php中header的用法详解
2013/06/07 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
网上书店创业计划书
2014/01/12 职场文书
中学生校园广播稿
2014/01/16 职场文书
活动总结报告格式
2014/05/09 职场文书
2014年女职工工作总结
2014/11/27 职场文书
2015年质检工作总结
2015/05/04 职场文书
预备党员入党感言
2015/08/01 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
Java实现注册登录跳转
2022/06/16 Java/Android