jquery图片轮播
实现效果：图片自动轮播；
鼠标移入相应数字，会显示相应图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<style>
.pic{
width: 570px;
height:273px;
overflow: hidden;
}
a {
width: 20px;
height: 20px;
border: 1px solid darksalmon;
text-decoration: none;
background-color: darksalmon;
color: white;
border-radius:50%;
display: inline-block;
/*display: inline-block;作用：为a设置宽高，并显示在一行*/
text-align: center;
}
.num {
margin-top: -23px;
margin-left: 430px;
}
.s {
background-color:orangered;
}
</style>
</head>
<body>
<div class="pic">
<img src="../img/1.jpg">
<img src="../img/2.jpg">
<img src="../img/3.jpg">
<img src="../img/4.jpg">
</div>
<div class="num">
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</div>
<script>
var i =0;
var timer;
//创建一个Show函数
function Show(){
$('img').eq(i).fadeIn(200).siblings("img").fadeOut(200);
//fadeIn()淡入，fadeOut()淡出。实现第i张图片显示时，其余隐藏。
$('div a').eq(i).addClass("s").siblings("div a").removeClass("s");
//只给对应i的数字以新样式，其余保持原样式。
}
//创建一个showTime()函数
function showTime(){
//定时器
timer = setInterval(function(){
//调用Show()函数
Show();
i++;
//当图片是最后一张，设置图片为第一张
if(i==4){
i=0;
}
},2000);
}
$(function () {
showTime();//调用showTime（）函数
})
//鼠标移入相应数字，显示对应图片
$("a").mouseenter(function () {
i = $(this).index();
console.log(i);
Show();
clearInterval(timer);
})
$("a").mouseout(function () {
showTime();
})
</script>
</body>
</html>
