前言
html
<div class=" banner2">
<ul class="img">
<li>
<img src="img/banner1.png" alt="" />
</li><li>
<img src="img/banner2.png" alt="" />
</li>
</ul>
</div>
css
.banner2{
height: 210px;
/*width: 1200px;*/
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
background: #000;
z-index: 4;
margin-top: 110px;
}
.banner2 .img{
width:5000000px;
position:absolute;
left:0;
top:0;
height: 210px;
}
.banner2 .img li{
/*width: 1200px;*/
height: 210px;
float: left;
}
.banner2 .img li img{
width:100%;
height: 210px;
}
js
$(function() {
var winwidth = screen.width;
$(".banner2 .img li").css("width", winwidth);
var i = 0;
var clone = $(".banner2 .img li").first().clone();
$(".banner2 .img").append(clone);
var size = $(".banner2 .img li").size();
// 自动轮播
var t = setInterval(moveL, 5000);
// 对banner2的定时器操作
$(".banner2").hover(function() {
clearInterval(t);
}, function() {
t = setInterval(moveL, 5000);
});
// 封装的动画函数
function moveL() {
i++;
if(i == size) {
// i=0;
$(".banner2 .img").css({
left: 0
});
i = 1;
}
$(".banner2 .img").stop().animate({
left: -i * winwidth
}, 500);
if(i == size - 1) {
$(".banner2 .num li").eq(0).addClass("on").siblings().removeClass("on");
} else {
$(".banner2 .num li").eq(i).addClass("on").siblings().removeClass("on");
}
}
function moveR() {
i--;
if(i == -1) {
$(".banner2 .img").css({
left: -(size - 1) * winwidth
});
i = size - 2;
}
$(".banner2 .img").stop().animate({
left: -i * winwidth
}, 500);
$(".banner2 .num li").eq(i).addClass("on").siblings().removeClass("on");
}
});
总结:进入页面要动态设置li的宽度,这是关键