console
var Index=0;
var timer=null;
var arrImg=["https://m.360buyimg.com/mobilecms/s1125x549_jfs/t16990/91/1072453031/195915/8de4233f/5ab9ec02N8e64711d.jpg","https://img1.360buyimg.com/da/s1138x556_jfs/t19018/104/1214766473/141963/d4c52b1c/5ac0a619N0d6e140c.jpg","https://m.360buyimg.com/mobilecms/s1138x556_jfs/t17302/242/1358363894/204942/119224cc/5ac495a7Nbd2d2d2d.jpg","https://m.360buyimg.com/mobilecms/s1138x556_jfs/t18193/325/1258624400/159622/c5037965/5ac4a381Na029e9b3.jpg"];
timer=setInterval(function(){
autoLoop()
},500)
$(".container").mouseover(function(){
clearInterval(timer)
}).mouseout(function(){
timer = setInterval( function(){
autoLoop();
}, 500 );
})
slide();
function slide () {
$(".icon li").click(function(){
var index=$(this).index();
$("slide img").attr("src",arrImg[index]);
$(".icon li").eq(index).addClass('active').siblings("li").removeClass('active') ;
Index = index;
})
}
function toggleSlide(){
$(".slide img").attr( "src", arrImg[Index] );
$(".icon li").eq(Index).addClass('active').siblings().removeClass('active')
}
function autoLoop(){
Index++;
if(Index == arrImg.length){
Index=0
}
toggleSlide();
}
<div class="container">
<div class="slide">
<img src="https://m.360buyimg.com/mobilecms/s1125x549_jfs/t16990/91/1072453031/195915/8de4233f/5ab9ec02N8e64711d.jpg" style="display:block;">
</div>
<div class="icon">
<ul>
<li class="active"><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
</ul>
</div>
</div>
* {
margin: 0px;
padding: 0px;
}
ul,li {
list-style-type: none;
}
a {
text-decoration: none;
color:#000;
}
img {
border: none;
display: none;
}
.container {
width: 760px;
margin: 20px auto;
position: relative;
}
.slide {
width: 760px;
height: 320px;
}
.slide img{
width: 100%;
height: 100%;
}
.icon {
position: absolute;
right: 50px;
bottom: 10px;
}
.icon li {
float: left;
margin-left: 20px;
background: green;
padding: 5px 10px;
cursor:pointer;
}
.icon li.active {
background: yellow;
}