图片无缝轮播-白红宇

图片无缝轮播

阅读量：5892 次

发布时间：2019-06-19

本文共 3261 字，大约阅读时间需要 10 分钟。

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

自己也尝试写了两个。

一、

　　通过改动ul的margin-left，不断的切换li

　　优点：语法简单，易懂

　　缺点：到了最后一画，就去迅速拉回到第一张

上代码：

html：

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);}

效果演示：

二、

　　每次修改li的margin-left，接着在第一个li已经隐藏后，把li移除，然后追加到ul最后

　　优点：实现了图片的真正无缝滚动

　　缺点：要操作dom，影响页面性能

html：

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();

效果演示：