图片无缝轮播

最近在看图片无缝滚动的例子。

自己也尝试写了两个。

一、

　　通过改动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

欢迎大家一起交流。。。