jQuery轻松实现无缝轮播效果

这个无缝轮播和那个图片平滑滚动的原理差不多。

原理：ul向左滚动，滚动一次，第一个li向ul插入，然后在让怎个ul的left值为0，也就是初始状态，这个状态太快我们无法看到，所以才会有平滑滚动的效果

//CSS

 *{ margin: 0px; padding: 0px;}
 li{ list-style: none;}
 .content{ width: 1020px; height:112px; overflow: hidden; border: #4e83c2 solid 1px; margin:50px auto; }
 .content ul{ width: 1020px; height:100px;}
 .content ul li{ float: left; width: 100px; height: 100px; border:#ccc solid 1px; display: block; margin: 5px;}
 

//HTML

  
  

   
1
   
2
   
3
   
4
   
5
   
6
   
7
   
8
   
9
   
10
   
11
   
12
   
13
   
14
   
15
   
16
   
17
   
18
   
19
   
20
   
21
   
22
   
23
   
24
  

//JQUERY

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。