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

最新推荐文章于 2019-06-27 01:18:54 发布

转载最新推荐文章于 2019-06-27 01:18:54 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2338463/blog/1982529

2019独角兽企业重金招聘Python工程师标准>>>

    <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>

转载于:https://my.oschina.net/u/2338463/blog/1982529