图片无缝轮播

 

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

自己也尝试写了两个。

一、

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

欢迎大家一起交流。。。