console
var arr = ["http://img.mp.sohu.com/upload/20170710/18931bc763024d7cbd105e1b46804446.png", "http://img.mp.sohu.com/upload/20170729/0eb7549533cb43108ba9e14db9a18aef.png", "http://img.mp.itc.cn/upload/20170630/bd5f0919d6d84ecc9301a8212e0442ff.jpg"];
var index = 0;
$(function () {
$("#a1,#a2").hide();
$("img")[0].src = arr[index];
$("#a3").css("background","yellow");
$("div").mouseover(function () {
$("#a1,#a2").show();
}).mouseout(function () {
$("#a1,#a2").hide();
});
$("#a1").click(function(){
index--;
if(index<0){
index=2;
$("#a3").css("background","gray");
}
$("#a3,#a4,#a5")[index].style.background="yellow";
$($("#a3,#a4,#a5")[index]).next().css("background","gray");
$("img")[0].src=arr[index];
});
$("#a2").click(function () {
index++;
if (index >= arr.length) {
index=0;
$("div")[0].lastElementChild.style.background="gray";
}
$("#a3,#a4,#a5")[index].style.background="yellow";
$($("#a3,#a4,#a5")[index]).prev().css("background","gray");
$("img")[0].src = arr[index];
});
});
<div>
<img src=""></img>
<a id="a1"><</a>
<a id="a2">></a>
<a id="a3"> 1 </a>
<a id="a4"> 2 </a>
<a id="a5"> 3 </a>
</div>
div{
position:absolute;
width: 200px;
height: 200px;
}
#a1{
font-size: 20px;
color: wheat;
text-align: center;
display: block;
height: 30px;
width: 14px;
background: gray;
opacity: 0.6;
position:absolute;
top: 40%;
left: 3%;
}
#a2{
font-size: 20px;
color: white;
text-align: center;
display: block;
background: gray;
width: 14px;
height: 30px;
opacity: 0.8;
position: absolute;
top: 40%;
right: 3%;
}
#a3,#a4,#a5{
display: block;
background: gray;
border-radius: 50%;
text-align: center;
height: 20px;
width: 20px;
line-height: 20px;
position: absolute;
bottom: 2%;
color: white;
}
#a3{
left: 30%;
}
#a4{
left: 41%;
}
#a5{
left: 52%;
}