<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝轮播</title>
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
.banner{position:relative;overflow:hidden;margin:100px auto;width:500px;height:300px;border:1px solid grey;}
.banner .img{position:absolute;top:0;left:0;width:5000px;}
.banner .img img{width:500px;height:300px;}
.banner .img li{float:left;}
.banner .img li a{display:block;border:none;}
.banner .num{position:absolute;bottom:10px;left:0;width:100%;text-align:center;font-size:0;}
.banner .num li{display:inline-block;margin:0 3px;width:10px;height:10px;border-radius:50%;background-color:#888;cursor:pointer;}
.banner .num li.on{background-color:#ff6a00;}
.banner .btn{position:absolute;top:50%;display:none;margin-top:-25px;width:30px;height:50px;background-color:grey;color:#fff;text-align:center;font-size:40px;font-family:"宋体";line-height:50px;opacity:.5;cursor:pointer;filter:alpha(opacity:.5);}
.banner .btn_l{left:0;}
.banner .btn_r{right:0;}
.banner:hover .btn{display:block;}
</style>
</head>
<body>
<div class="banner">
<ul class="img">
<li><a href="#"><img src="image/qsmy1.png" /></a></li>
<li><a href="#"><img src="image/qsmy2.png" /></a></li>
<li><a href="#"><img src="image/qsmy3.png" /></a></li>
<li><a href="#"><img src="image/qsmy4.png" /></a></li>
</ul>
<ul class="num">
</ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
</body>
<script type="text/javascript">
$(function() {
var i = 0;
var clone = $(".banner .img li").first().clone(); //克隆第一张图片
$(".banner .img").append(clone); //复制到列表最后
var size = $(".banner .img li").size();
for (var j = 0; j < size - 1; j++) {
$(".banner .num").append("<li></li>");
}
$(".banner .num li").first().addClass("on");
/*自动轮播*/
var t = setInterval(function() {
i++;
move();
}, 2000);
/*鼠标悬停事件*/
$(".banner").hover(function() {
clearInterval(t); //鼠标悬停时清除定时器
}, function() {
t = setInterval(function() {
i++;
move();
}, 2000); //鼠标移出时清除定时器
});
/*鼠标滑入原点事件*/
$(".banner .num li").hover(function() {
var index = $(this).index(); //获取当前索引值
i = index;
$(".banner .img").stop().animate({
left: -index * 500
}, 500);
$(this).addClass("on").siblings().removeClass("on");
});
/*向左按钮*/
$(".banner .btn_l").click(function() {
i++;
move();
})
/*向右按钮*/
$(".banner .btn_r").click(function() {
i--;
move();
})
/*移动事件*/
function move() {
if (i == size) {
$(".banner .img").css({
left: 0
});
i = 1;
}
if (i == -1) {
$(".banner .img").css({
left: -(size - 1) * 500
});
i = size - 2;
}
$(".banner .img").stop().animate({
left: -i * 500
}, 500);
if (i == size - 1) {
$(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");
} else {
$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
}
}
});
</script>
</html>
