点击自动轮播图片下面的小圆点实现图片切换功能，并不是左右箭头那种切换

Question

我这个轮播图片没有左右箭头，只有下面的小圆点随着图片一起轮播，怎么实现onclick点击小圆点切换图片的功能

这是我的js代码

var nextPcc = 1;

function turnDisplay(){

var arr = document.getElementById("center_center_2").getElementsByTagName("img");

//把下一张要显示的图片显示,其他图片隐藏

for(var i = 0;i < arr.length;i++){

if(i == nextPcc){

arr[i].className = "show";

}else{

arr[i].className = "hidden";

}

}

}

function turnDisplay1(){

var ara = document.getElementById("ppp").getElementsByTagName("a");

    for( var j = 0; j<ara.length;j++){

if(j == nextPcc){

ara[j].className = "baidian";

}else{

    ara[j].className = "quanquan";

}

}turnDisplay();

if(nextPcc < ara.length - 1){

    nextPcc++;

    }else{

    nextPcc = 0;

     }

return j;

}

Answer 1

先遍历每个小圆点attr("data-index",i)，再绑定点击事件，点击后隐藏所有图片再显示下标为i的图片，通过$（this）.attr("data-index")获取下标