前言：
现时看官们对“html小圆点放在图片上”大概比较关心，朋友们都想要知道一些“html小圆点放在图片上”的相关资讯。那么小编同时在网上网罗了一些有关“html小圆点放在图片上””的相关内容，希望我们能喜欢，各位老铁们一起来学习一下吧！html和css测试代码：
js代码截图：
<script>
var index=0;
var content=document.getElementById('content');
var imgs=content.getElementsByTagName('li');
var ctrl=document.getElementById('ctrl');
var circle=ctrl.getElementsByTagName('li');
var btnl=document.getElementById('left');
var btnr=document.getElementById('right');
btnl.onclick=function () {
index--;
if(index<0){
index=imgs.length-1;
}
change();
}
btnr.onclick=function () {
index++;
if(index>imgs.length-1){
index=0;
}
change();
}
//小圆点点击
for(var a=0;a<circle.length;a++){
circle[a].value=a;
circle[a].onclick=function(){
index=this.value;
change();
}
}
//显示和隐藏图片方法和小圆点变化
function change(){
for(var i=0;i<imgs.length;i++){
imgs[i].style.display="none";
}
imgs[index].style.display="block";
for(var j=0;j<circle.length;j++){
circle[j].style.background="#fff";
}
circle[index].style.background="pink";
}
</script>
效果展示：
标签： #html小圆点放在图片上
