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

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")获取下标