<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery-2.1.4.min.js"></script>
<script>
//手动轮播效果
$(function () {
var size=$(".img li").size();
//根据图片数量，动态添加,<li>标签个数，无需再下文手动添加
for (var i=1;i<=size;i++){
var li="<li>"+i+"</li>"
$(".num").append(li);
}
$(".num li").eq(0).show(); //eq根据索引选择
$(".num li").mouseover(function () {
$(this).addClass("active").siblings().removeClass("active"); //当前标签加上active效果，其他兄弟标签取消active效果
var index=$(this).index();
i = index;
$(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
});
i=0;
var t= setInterval(move,1500)
function move() {
i++;
if(i==size){
i=0;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
};
function moveL() {
i--;
if (i==-1){
i = size-1;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
$(".out").hover(function () {
clearInterval(t);
}),function () {
t=setInterval(move,1500);
};
$(".out .right").click(function () {
move()
});
$(".out .left").click(function () {
moveL()
});
});
</script>
</head>
<body>
<div class="out">
<ul class="img">
<li><a href="#"><img src="images/001.jpg" alt=""></a></li>
<li><a href="#"><img src="images/002.jpg" alt=""></a></li>
<li><a href="#"><img src="images/003.jpg" alt=""></a></li>
<li><a href="#"><img src="images/004.jpg" alt=""></a></li>
<li><a href="#"><img src="images/005.jpg" alt=""></a></li>
</ul>
<ul class="num">
<!--<li class="active">1</li>-->
<!--<li>2</li>-->
<!--<li>3</li>-->
<!--<li>4</li>-->
<!--<li>5</li>-->
</ul>
<div class="left btn"><</div>
<div class="right btn">></div>
</div>
</body>
</html>
*{ margin: 0; padding: 0; } ul{ list-style: none; } .out{ width: 730px; height: 454px; /*border: 8px solid mediumvioletred;*/ margin: 50px auto; position: relative; } .out .img li{ position: absolute; left: 0; top: 0; } .out .num{ position: absolute; left:0; bottom: 20px; text-align: center; font-size: 0; width: 50%; } .out .btn{ position: absolute; top:50%; margin-top: -30px; width: 30px; height: 60px; background-color: aliceblue; color: black; text-align: center; line-height: 60px; font-size: 40px; display: none; } .out .num li{ width: 20px; height: 20px; background-color: grey; color: #fff; text-align: center; line-height: 20px; border-radius: 50%; display: inline; font-size: 18px; margin: 0 10px; cursor: pointer; } .out .num li.active{ background-color: red; } .out .left{ left: 0; } .out .right{ right: 0; } .out:hover .btn{ display: block; }