龙空技术网

js原生轮播图也叫banner图(左右按钮 底部小圆点)

北漂佳佳的生活 176

前言:

而今兄弟们对“css列表圆点”可能比较看重,大家都想要分析一些“css列表圆点”的相关资讯。那么小编同时在网上收集了一些对于“css列表圆点””的相关内容,希望同学们能喜欢,姐妹们快快来了解一下吧!

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>

效果展示:

标签: #css列表圆点