html 无缝拼接,用jQuery写一个无缝衔接轮播图,超精简又详细

这个在今天之前一直困扰着我,因为之前做毕业设计的时候用到过。但是我觉得网上写的那些实在是太绕太复杂了,所以我只会套用,完全不理解。

由于无聊就自己动手去写，发现其实很简单，反而去参考别人的会把自己绕晕，下面我附上代码，以及注释，如果有什么看不懂的还可以问我。

Insert title here

*,ul,a{

margin:0;

padding:0;

border:0;

list-style:none;

text-decoration:none;

}

#banner_wrap{

width:1000px;

height:400px;

margin:0 auto;

border:1px solid #c0a599;

margin-top:30px;

position:relative;

overflow:hidden;

}

#banner{

position:absolute;

height:400px;

}

.oLi{

width:1000px;

height:400px;

float:left;

}

//用到的是jQuery代码,不介绍代码单个意思

$(function(){

//获取li的长度

var len=$(".oLi").length;

//把所有li的宽度算好,赋值给ul当宽度

$("#banner").width($(".oLi").eq(0).width()*len);

//id是为了后面的计时器暂停设置的

var id;

//index用来统计滚动次数

var index=0;

//启动计时器

id=setInterval(start,3000);

//给ul(#banner)添加hover选择器事件

$("#banner").hover(function(){

//鼠标进入的时候暂停

clearInterval(id);

},function(){

//鼠标离开的时候开始

id=setInterval(start,3000);

});

//计时器中执行的代码块

function start(){

//执行的时候次数++

index++;

//用animate设置ul的left属性,与左边的距离

$("#banner").animate({'left':-$(".oLi").eq(0).width()*(index%len)});

//实现无缝轮播的关键地方

//判断index%len的值index%len=0的时候表示第一张,那么len-1表示最后一张,

//最后一张与第一张一模一样,所有直接修改left属性

if(index%len==(len-1)){

$("#banner").animate({'left':0},0);

//同时给index+1跳过第一张图的再次加载

index++;

}

//实际的加载情况就是第一张,第二张,第三张,第四张,第五张(瞬间改变图片为第一张的,是一模一样的替换,不是滚动,看不出来,所以称之为无缝轮播),第二张...

}

});

• 
• 
• 
• 
•