欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-26 20:44:44
...
本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下

效果图如下:

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

一、HTML代码

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

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

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

二、CSS代码

*{margin: 0; padding: 0;} 
 
img{ 
  border:0; 
} 
 
#container{ 
  width:800px; 
  height: 130px; 
  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

四、JQuery实现代码


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

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

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

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

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

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