实现无缝轮播,图片顺序是1-2-3-4-1,当图片播放到末尾时,用animate的最后一个参数,将left值调回0,就可以实现想要的效果了。
如果有不对或者需要优化的地方,请各位留言指正,么么哒
index部分:
<body>
<div class="head">
<div class="imgNav" id="imgNavId"></div>
</div>
<div class="navLi"></div>
<div class="content"></div>
<div class="footNav"></div>
</body>
css部分:
.head{
width: 100%;
position: relative;
}
.imgNav{
position: absolute;
top: 0;
left: 0;
}
.imgNav div{
float: left;
}
js部分:
// 图片数据
var imgs = [
{0:'images/1.png'},
{1:'images/2.png'},
{2:'images/3.png'},
{3:'images/4.png'}
];
// 获取节点
var imgNavId = $('#imgNavId');
// 获取屏幕宽度
var leng = $(window).width();
// 设置常数n
var n = 0
// 循环加载图片
for(var i in imgs){
imgNavId.append(
$('<div />').append(
$('<img />').prop('src',imgs[i][i]).css('width',leng+'px')
)
)
}
imgNavId.append(
$('<div />').append(
$('<img />').prop('src',imgs[0][0]).css('width',leng+'px')
))
imgNavId.css('width',(imgs.length+1)*leng+'px')
var lef = imgNavId.css('left');
// 轮播动画无缝衔接
setInterval(function(){
n++;
if (n < 4) {
imgNavId.animate({left:-leng*n+'px'});
}else{
imgNavId.animate({left:-leng*n+'px'},function(){
imgNavId.css('left',0);
});
n = 0;
};
},3000)