<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐入渐出</title>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
<style>
*{
padding: 0;
margin: 0;
}
img{
vertical-align: top;
}
li{
list-style: none;
}
.slid{
position: relative;
width: 1226px;
height: 460px;
margin: 100px auto;
}
.slid li{
position: absolute;
top: 0;
left: 0;
display: none;
}
.slid span{
display: block;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 30px;
cursor: pointer;
color: white;
}
.slid span:hover{
background: rgba(0,0,0,.3);
transform: scale(1.2);
}
.pre{
position: absolute;
top: 200px;
left: 10px;
}
.next{
position: absolute;
top: 200px;
right: 10px;
}
.slid p .cur{
background: grey;
}
.slid p{
position: absolute;
width: 130px;
height: 40px;
bottom: 30px;
right: 20px;
background: rgba(0,255,255,.3);
}
.slid p label{
float: left;
width: 12px;
height: 12px;
border-radius: 50%;
background: white;
margin: 14px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="slid" id="slid">
<ul>
<li><a href="#"><img src="images/mi1.jpg"></a></li>
<li><a href="#"><img src="images/mi2.jpg"></a></li>
<li><a href="#"><img src="images/mi3.jpg"></a></li>
<li><a href="#"><img src="images/mi4.jpg"></a></li>
</ul>
<span class="pre" id="pre"> < </span>
<span class="next" id="next"> > </span>
<p id="index">
<label class="cur"></label><label></label><label></label><label></label>
</p>
</div>
<script>
var i=0;
var t=0;
// 定时器，让图片自动轮播
// $('#slid li').eq(i).fadeIn()
$('#slid li').eq(i).show();
function autoPlay(){//函数封装
t=setInterval(function () {
i++;
if(i>3){
i=0;
}
$('#slid li').eq(i).fadeIn(1000).siblings().fadeOut(1000);
$('#index label').eq(i).addClass('cur').siblings().removeClass('cur');
},3000)
}
autoPlay();//调用函数
//鼠标移动与移开事件
$('#slid').mouseover(function () {
clearInterval(t)
}).mouseout(function () {
autoPlay();
});
// 左箭头点击
$('#pre').click(function () {
i--;
if(i<0){
i=3;
}
$('#slid li').eq(i).fadeIn(1000).siblings().fadeOut(1000);
$('#index label').eq(i).addClass('cur').siblings().removeClass('cur');
})
// 右箭头点击
$('#next').click(function () {
i++;
if(i>3){
i=0;
}
$('#slid li').eq(i).fadeIn(1000).siblings().fadeOut(1000);
$('#index label').eq(i).addClass('cur').siblings().removeClass('cur');
})
// 鼠标移动到下标
$('#index label').mouseover(function () {
$(this).addClass('cur').siblings().removeClass('cur');
i=$(this).index();
$('#slid li').eq(i).fadeIn(1000).siblings().fadeOut(1000);
})
</script>
</body>
</html>
