图片无缝轮播
最近在看图片无缝滚动的例子。
自己也尝试写了两个。
一、
通过改动ul的margin-left，不断的切换li
优点：语法简单，易懂
缺点：到了最后一画，就去迅速拉回到第一张
上代码：
html：
<!-- 图片滚动 --> <div class="right_slide"> <ul class="slide_ul"> <li class="slide_li slide_one"></li> <li class="slide_li slide_two"></li> <li class="slide_li slide_three"></li> <li class="slide_li slide_four"></li> <li class="slide_li slide_five"></li> </ul> </div>
CSS：
.right_mid .right_slide { width: 758px; height: 190px; overflow: hidden; margin: 20px 0 0 0; }.right_mid .slide_ul { width: 3790px; height: 189px; }.right_mid .slide_ul .slide_li { width: 758px; height: 189px; float:left; }.right_mid .slide_ul .slide_one { background: url('img/slideli.png') no-repeat 0 0; } .right_mid .slide_ul .slide_two { background: url('img/slideli.png') no-repeat 0 -190px; } .right_mid .slide_ul .slide_three { background: url('img/slideli.png') no-repeat 0 -380px; } .right_mid .slide_ul .slide_four { background: url('img/slideli.png') no-repeat 0 -570px; } .right_mid .slide_ul .slide_five { background: url('img/slideli.png') no-repeat 0 -760px; }
js：
//图片滚动var _num = 5;function slide() { if (_num == 1) { $('.right_mid .slide_ul').animate({marginLeft : '0'},500); _num = 5; }else { $('.right_mid .slide_ul').animate({marginLeft : '-=758px'},1000); _num--; } setTimeout('slide()',3000);}
效果演示：http://nav360.sinaapp.com/index.php/
二、
每次修改li的margin-left，接着在第一个li已经隐藏后，把li移除，然后追加到ul最后
优点：实现了图片的真正无缝滚动
缺点：要操作dom，影响页面性能
html：
<div class="main"> <ul class="slide_ul"> <li class="slide_li sli_first"></li> <li class="slide_li sli_second"></li> <li class="slide_li sli_three"></li> <li class="slide_li sli_four"></li> <li class="slide_li sli_five"></li> </ul> </div>
css：
.main { width: 200px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -100px; overflow: hidden; } .main .slide_ul { width: 1000px; height: 100px; position: relative; list-style: none; margin: 0; padding: 0; } .main .slide_ul .slide_li { width: 200px; height: 100px; float: left; } .main .slide_ul .sli_first { background: url('../../resources/img/boy.jpg') no-repeat; } .main .slide_ul .sli_second { background: url('../../resources/img/girl.jpg') no-repeat; } .main .slide_ul .sli_three { background: url('../../resources/img/logo.png') no-repeat; } .main .slide_ul .sli_four { background: url('../../resources/img/little.jpg') no-repeat; } .main .slide_ul .sli_five { background: url('../../resources/img/left.png') no-repeat; }
js：
function slide() { $('.slide_li').eq(0).animate({marginLeft : '-200px'},1000, function () { $(this).detach().appendTo('.slide_ul').css('marginLeft','0'); }); setTimeout('slide()',2000); } slide();
效果演示：http://nav360.sinaapp.com/index.php/picslide
欢迎大家一起交流。。。