实现图片轮播效果，打开页面，每隔3秒切换至下一张图片；光标移入数字时，播放相应图片。
思路：
（1）获取需要轮播的图片和展示的div。
（2）使用animate设置left值，每次移动宽度为展示div的宽度。
（3）播放图片时，对应数字应用红色背景样式，其他数字移除该样式。
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 800px;
height: 400px;
}
.banner {
width: 800px;
height: 400px;
border: 1px solid black;
margin: 50px auto;
overflow: hidden;
cursor: pointer;
position: relative;
}
.banner .slide {
width: 4800px;
height: 400px;
position: absolute;
left: -600px;
}
.banner .slide .pic {
width: 800px;
height: 400px;
line-height: 400px;
text-align: center;
float: left;
font-size: 72px;
color: white;
}
.banner .numbers {
width: 150px;
height: 30px;
position: absolute;
bottom: 1%;
left: 85%;
margin-left: -50px;
z-index: 2;
}
.banner .numbers .number {
width: 20px;
height: 20px;
float: left;
margin: 5px 6px;
cursor: pointer;
background-color: white;
color: black;
text-align: center;
border: 1px solid red;
}
.banner .numbers .on {
background-color: red;
color: #fff;
font-weight: bolder;
}
</style>
</head>
<body>
<div class="banner">
<div class="slide">
<div class="pic"><img src="./4.png"></div>
<div class="pic"><img src="./1.png"></div>
<div class="pic"><img src="./2.png"></div>
<div class="pic"><img src="./3.png"></div>
<div class="pic"><img src="./4.png"></div>
<div class="pic"><img src="./1.png"></div>
</div>
<div class="numbers">
<span class="number on">1</span>
<span class="number">2</span>
<span class="number">3</span>
<span class="number">4</span>
</div>
</div>
<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var index = 1;
var timer = null;
var size = $('.slide').children().size();
var picWidth = $('.pic').width();
$('.banner').mouseover(function() {
clearInterval(timer);
});
$('.banner').mouseleave(function() {
autoSlide();
});
$('.slide').mouseleave();
function autoSlide() {
timer = setInterval(function() {
index++;
changeImg();
changeNums();
}, 3000);
};
function changeImg() {
var slideWidth = -1 * picWidth * index;
$('.slide').animate({
'left': slideWidth + 'px'
}, 500);
if (index >= size - 1) {
$('.slide').animate({
'left': -picWidth + 'px'
}, 0);
index = 1;
}
if (index < 1) {
$('.slide').animate({
'left': -(size - 2) * picWidth + 'px'
}, 0);
index = size - 2;
}
}
function changeNums() {
$('.number').eq(index - 1).addClass('on').siblings().removeClass('on');
}
$('.number').mouseover(function(event) {
var target = event.target;
index = $(target).index() + 1;
changeImg();
changeNums();
});
</script>
</body>
</html>
