jQuery实现轮播

一、轮播的实现原理

1.轮播是把需要轮播的图片浮动水平排列成一排。

2.然后设置一个视窗,大小等于一张图片。

3.视窗的overflow设置为hidden,溢出部分不可见。

4.点击下一页,所有图片就水平移动一个宽度。

5.如果要实现左右滚动无限循环的效果,就需要在图片列表开头和结尾分别添加最后一张图和第一张图

就像一张胶卷,每次展示一张图片,通过移动胶卷来切换可视的图片。

二、使用jquery实现图片自动轮播效果




  
  无限循环滚动轮播
  


  
  
  


效果展示

三、在自动轮播代码的基础上改进代码,实现渐变轮播效果




  
  无限循环滚动轮播
  


  
  
  


效果展示

你可能感兴趣的:(jQuery实现轮播)