图片无缝轮播

来源:互联网 时间:1970-01-01

 

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

自己也尝试写了两个。

一、

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

欢迎大家一起交流。。。


相关阅读:
Top