jquery幻灯片无缝循环无限循环 原理及实现

    <style>
		.obj-slide{overflow: hidden;}
		.obj-slide ul{position: relative;}
		.obj-slide ul li{float: left;}
	</style>
	<div class="obj-slide" >
    	<ul>
            <li>
            	<img src="img/w.jpg"  />
            </li>
        	<li>
            	<img src="img/s.jpg" />
            </li>
            <li>
            	<img src="img/w.jpg"  />
            </li>
        </ul>
	</div>
    <script>
    $(function() {
	$(".obj-slide ul").css("width",sWidth * (len));
	$(".obj-slide ul li").css("width",sWidth);
	$(".obj-slide ul li img").css("width",sWidth);
	 function scroll(){
	     $(".obj-slide ul").animate({"left":-sWidth},function(){
	        $(".obj-slide ul li:eq(0)").appendTo($(".obj-slide ul"))
	        $(".obj-slide ul").css({"left":0})
	     })
	 }
     setInterval(scroll,3000)
    })
    </script>

猜你喜欢

转载自my.oschina.net/u/2338463/blog/1982529