这个在今天之前一直困扰着我,因为之前做毕业设计的时候用到过。但是我觉得网上写的那些实在是太绕太复杂了,所以我只会套用,完全不理解。
由于无聊就自己动手去写,发现其实很简单,反而去参考别人的会把自己绕晕,下面我附上代码,以及注释,如果有什么看不懂的还可以问我。
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++;
}
//实际的加载情况就是第一张,第二张,第三张,第四张,第五张(瞬间改变图片为第一张的,是一模一样的替换,不是滚动,看不出来,所以称之为无缝轮播),第二张...
}
});