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

效果图如下：

一、HTML代码。

body div id=' container ' ul id=' content ' lia href=' # ' img src=' http : images/0 . png '/a/Li lia href=' # ' img src=' http : images/1 . png '/a/Li lia href=' # ' img src=' http : images/tewu . png '/a/Li lia href=' # ' img src=' http : images/22.ID为content的ul用于包装需要滚动的图片。

3.li元素用于包装特定的图片。

第二，CSS代码。

* { margin : 0；padd : 0；} img { border:0} #容器{ width:800px高度： 130 px；span style=' white-space : pre '/span margin :100 px auto；border:3px纯蓝；飞越：隐藏；相对位置：} #容器ul { list-style : none；宽度width:10000px绝对位置：} #集装箱ul li { float:left右边距： 20px；}请在此解释为什么ul的宽度设置为10000px。因为无缝连续滚动的实现原理是在已有显示图片的基础上克隆一个副本，拼接在显示图片后面，但由于显示图片的总宽度未知，为了安全起见，最好将ul的宽度设置得更大。

三、无缝连轧原理分析。

四.JQuery实现代码。

脚本类型=' text/JavaScript '/* window . onload的加载时间晚于$(function(){})，所以那些宽度计算可以在Chrome */window . onload=function(){/*计算一段的宽度*/var segment width=0；$('#container #content li ')。每个(函数(){ segmentWidth=$(this))。外部宽度(真)；});$('#container #content li ')。克隆()。appendo($(“# container # content”))；跑(6000)；函数运行(间隔){ $('#container #content '))。animate({ ' left ' :-segment width }、interval、' linear '、function(){ $(' # container # content ')。css('left '，0)；跑(6000)；});} $('#container ')。mouse enter(function(){ $(' # container # content '))。stop()；}).mouse leave(function(){ var passedCourse=-parsent($(' # container # content '))。css('左')；var time=6000 *(1-passed course/segment width)；运行(时间)；});};/script 1。首先遍历所有li元素，计算它们的宽度总和。2.将一张图片复制到已有图片的背面，原理分析图如图1所示。

3.设置6秒滚动界面上已有的图片。滚动后，设置内容的左值，整体拉回到原来的状态，原理分析图如图2所示。然后递归调用run方法完成无限滚动。

4.当鼠标经过滚动区域时，动画立即停止；当鼠标离开时，动画继续。

动画继续执行的代码分析如下：

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