SOURCE

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%;
}