~~~

$(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();

})

~~~

~~~

*{

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);

}

~~~

效果图如下：