jQuery轻松实现无缝轮播效果

//CSS

?

1 2 3 4 5 6 7 8

<style>   *{ 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 ;}    </style>

//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 25 26 27 28 29 30

< body >    < div class = "content" >    < ul >     < li >1</ li >     < li >2</ li >     < li >3</ li >     < li >4</ li >     < li >5</ li >     < li >6</ li >     < li >7</ li >     < li >8</ li >     < li >9</ li >     < li >10</ li >     < li >11</ li >     < li >12</ li >     < li >13</ li >     < li >14</ li >     < li >15</ li >     < li >16</ li >     < li >17</ li >     < li >18</ li >     < li >19</ li >     < li >20</ li >     < li >21</ li >     < li >22</ li >     < li >23</ li >     < li >24</ li >    </ ul > </ div > </ body >

//JQUERY

?

1 2 3 4 5 6 7 8 9

<script>   function scroll(){   $( ".content ul" ).animate({ "margin-left" : "-110px" }, function (){    $( ".content ul li:eq(0)" ).appendTo($( ".content ul" ))    $( ".content ul" ).css({ "margin-left" :0})   })   }   setInterval(scroll,3000) </script>