CSS+jQuery实现轮播
实现功能：
- 自动轮播；
- 鼠标放在上面停止轮播；
- 鼠标放在上面显示左右切换的按钮；
- 鼠标放在小圆圈上显示对应的图片；
轮播效果图
style.css
.outer{
width: 790px;
height: 340px;
margin: 80px auto;
position: relative;
}
.img li{
position: absolute;
list-style: none;
top:0;
left: 0;
}
.num{
position: absolute;
bottom: 18px;
left: 270px;
list-style: none;
}
.num li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-left: 4px;
}
.btn{
position: absolute;
top:50%;
width: 30px;
height: 60px;
background-color: lightgray;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.7;
margin-top: -30px;
display: none;
}
.left{
left:0;
}
.right{
right: 0;
}
.outer:hover .btn{
display: block;
}
.num .active{
background-color: red;
}
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
<li><a href=""><img src="img/6.jpg" alt=""></a></li>
</ul>
<ul class="num">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
<script>
// 通过jQuery自动创建按钮
var img_num = $(".img li").length;
for (var i=0;i<img_num;i++){
$(".num").append("<li></li>")
}
$(".num li:first").addClass("active");
// 手动轮播
$(".num li").mouseover(function () {
var index = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".img li").eq(index).stop().fadeIn(500).siblings().stop().fadeOut(500);
});
//自动轮播
var c = setInterval(GO_R,1500);
var i = 0;
function GO_R() {
if(i == img_num-1){
i = -1
}
i ++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
function GO_L() {
if(i == 0){
i = img_num-1;
}
i --;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
$(".outer").hover(function () {
clearInterval(c);
}, function () {
c = setInterval(GO_R, 1500);
});
// button
$(".right").click(GO_R);
$(".left").click(GO_L);
</script>
</body>
</html>
以上代码基本实现了所要功能，但存在一个问题，就是当鼠标放在下方小圆圈的时候会显示对应图片，而鼠标移开后不是从当前图片开始轮播，反而是从上次轮播后的地方开始。
解决方法很简单，将全局变量i放在代码的最前端，代码当中的index变量换成变量i，此时应注意用于循环的i应该变成j。
以下为完整版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
<li><a href=""><img src="img/6.jpg" alt=""></a></li>
</ul>
<ul class="num">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
<script>
var i = 0;
// 通过jQuery自动创建按钮
var img_num = $(".img li").length;
for (var j=0;j<img_num;j++){
$(".num").append("<li></li>")
}
$(".num li:first").addClass("active");
// 手动轮播
$(".num li").mouseover(function () {
i = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
});
//自动轮播
var c = setInterval(GO_R,1500);
function GO_R() {
if(i == img_num-1){
i = -1
}
i ++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
function GO_L() {
if(i == 0){
i = img_num-1;
}
i --;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
$(".outer").hover(function () {
clearInterval(c);
}, function () {
c = setInterval(GO_R, 1500);
});
// button
$(".right").click(GO_R);
$(".left").click(GO_L);
</script>
</body>
</html>