<title>无缝轮播图</title>
<style>
*{margin: 0;padding:0; }
ul{list-style: none;}
.banner{width: 600px;height: 300px;border: 2px solid
#ccc;margin: 100px auto;position: relative;overflow: hidden;}
.img{position: absolute;top: 0;left: 0}
.img li{float: left;}
.num{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;}
.num li{width: 10px;height: 10px;background:rgba(0,0,0,0.5);display: block;border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;}
.btn{display: none;}
.btn span{display: block;width: 50px;height: 100px;background: rgba(0,0,0,0.6);color:
#fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;}
.btn .prev{position: absolute;left: 0;top: 50%;margin-top: -50px;}
.btn .next{position: absolute;right: 0;top: 50%;margin-top: -50px;}
.num .active{background-color:
#fff;}
</style>
</head>
<body>
<div class=
"banner"
>
<ul class=
"img"
>
<li><a href=
"#"
><img src=
"img/1.jpg"
alt=
"第1张图片"
></a></li>
<li><a href=
"http://www.hkvenus.net/"
><img src=
"img/2.jpg"
alt=
"第2张图片"
>http://www.hkvenus.net/</a></li>
<li><a href=
"http://www.tgb001.com/"
><img src=
"img/3.jpg"
alt=
"第3张图片"
>http://www.tgb001.com/</a></li>
<li><a href=
"#"
><img src=
"img/4.jpg"
alt=
"第4张图片"
></a></li>
<li><a href=
"#"
><img src=
"img/5.jpg"
alt=
"第5张图片"
></a></li>
</ul>
<ul class=
"num"
></ul>
//
<div class=
"btn"
>
<span class=
"prev"
><</span>
<span class=
"next"
>></span>
</div>
</div>
<script>
$(
function
(){
var
i=0;
var
timer=
null
;
for
(
var
j = 0; j < $(
'.img li'
).length; j++) {
//创建圆点
$(
'.num'
).append(
'<li></li>'
)
}
$(
'.num li'
).first().addClass(
'active'
);
//给第一个圆点添加样式
var
firstimg=$(
'.img li'
).first().clone();
//复制第一张图片
$(
'.img'
).append(firstimg).width($(
'.img li'
).length*($(
'.img img'
).width()));
//将第一张图片放到最后一张图片后,设置ul的宽度为图片张数*图片宽度
// 下一个按钮
$(
'.next'
).click(
function
(){
i++;
if
(i==$(
'.img li'
).length) {
i=1;
//这里不是i=0
$(
'.img'
).css({left:0});
//保证无缝轮播,设置left值
};
$(
'.img'
).stop().animate({left:-i*600},300);
if
(i==$(
'.img li'
).length-1) {
//设置小圆点指示
$(
'.num li'
).eq(0).addClass(
'active'
).siblings().removeClass(
'active'
);
}
else
{
$(
'.num li'
).eq(i).addClass(
'active'
).siblings().removeClass(
'active'
);
}
})
// 上一个按钮
$(
'.prev'
).click(
function
(){
i--;
if
(i==-1) {
i=$(
'.img li'
).length-2;
$(
'.img'
).css({left:-($(
'.img li'
).length-1)*600});
}
$(
'.img'
).stop().animate({left:-i*600},300);
$(
'.num li'
).eq(i).addClass(
'active'
).siblings().removeClass(
'active'
);
})
//设置按钮的显示和隐藏
$(
'.banner'
).hover(
function
(){
$(
'.btn'
).show();
},
function
(){
$(
'.btn'
).hide();
})
//鼠标划入圆点
$(
'.num li'
).mouseover(
function
(){
var
_index=$(
this
).index();
$(
'.img'
).stop().animate({left:-_index*600},150);
$(
'.num li'
).eq(_index).addClass(
'active'
).siblings().removeClass(
'active'
);
})
//定时器自动播放
timer=setInterval(
function
(){
i++;
if
(i==$(
'.img li'
).length) {
i=1;
$(
'.img'
).css({left:0});
};
$(
'.img'
).stop().animate({left:-i*600},300);
if
(i==$(
'.img li'
).length-1) {
$(
'.num li'
).eq(0).addClass(
'active'
).siblings().removeClass(
'active'
);
}
else
{
$(
'.num li'
).eq(i).addClass(
'active'
).siblings().removeClass(
'active'
);
}
},1000)
//鼠标移入,暂停自动播放,移出,开始自动播放
$(
'.banner'
).hover(
function
(){
clearInterval(timer);
},
function
(){
timer=setInterval(
function
(){
i++;
if
(i==$(
'.img li'
).length) {
i=1;
$(
'.img'
).css({left:0});
};
$(
'.img'
).stop().animate({left:-i*600},300);
if
(i==$(
'.img li'
).length-1) {
$(
'.num li'
).eq(0).addClass(
'active'
).siblings().removeClass(
'active'
);
}
else
{
$(
'.num li'
).eq(i).addClass(
'active'
).siblings().removeClass(
'active'
);
}
},1000)
})
})
</script>