~~~
<body>
<div class="content">
<div id="list">
<img src="img/01.png" alt="">
<img src="img/02.png" alt="">
<img src="img/03.png" alt="">
<img src="img/04.png" alt="">
<img src="img/05.png" alt="">
</div>
<button id="prev"></button>
<button id="next"></button>
<div id="btns">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
$(function(){
var index=0;
var timer;
// 1.点击next
$("#next").click(function(){
index++;
if(index>4){
index=0;
}
animate(index);
})
// 2.点击prev
$("#prev").click(function(){
index--;
if(index<0){
index=4;
}
animate(index);
})
// 3.焦点随左右按钮变化
function animate(index){
$("#list img").eq(index).fadeIn(300).siblings().fadeOut(300); // 左右按钮随着图片变化
$("#btns span").eq(index).addClass("current").siblings().removeClass("current");
}
// 4.点击按钮，让对应的图片出现
$("#btns span").click(function(){
$(this).addClass("current").siblings().removeClass("current");
index=$(this).index();
$("#list img").eq(index).fadeIn(300).siblings().fadeOut(300);
})
// 5.自动播放
function play(){
timer=setInterval(function(){
$("#next").click()
},2000)
}
function stop(){
clearInterval(timer)
}
$(".content").mouseover(function(){
stop();
})
$(".content").mouseout(function(){
play();
})
play();
})
</script>
</body>
~~~
~~~
*{
margin: 0;
padding: 0;
}
.content{
position: relative;
width: 600px;height: 400px;
margin-left: auto;
margin-right: auto;
border: 1px solid #333;
}
#list{
position: absolute;
width: 600px;
height: 400px;
}
#list img,#prev,#next,#btns{
position: absolute;
}
#list img:not(:first-child){
display: none;
}
#prev,#next{
top: 50%;transform: translateY(-50%);/*垂直居中 */
z-index: 100;
width: 40px;
height: 70px;
background: url("../img/icon-slides.png");
border: none;
}
#prev{
background-position-x: -86px;
}
#prev:hover{
background-position: 0;
}
#next{
right: 0;
background-position-x: -125px;
}
#next:hover{
background-position: -43px;
}
#btns{
z-index: 101;
transform: translateX(-50%);
bottom: 20px;
left: 50%;
}
#btns .current{
background: orangered;
}
#btns>span{
cursor: pointer;
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
border: 1px solid #fff;
background-color: rgba(44,44, 44, .3);
}
~~~
效果图如下：
