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

作者: 健隆 分类: 前端 发布时间: 2019-03-27 13:39
    <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>

 


如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!