这篇文章给大家分享的是有关css如何实现带箭头和圆点的轮播的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
功能：图片轮播，当鼠标移入图片、圆点和方向键时，停止轮播，移除恢复。
首先建立div，并放入图片
#wai{ width:300px; height: 300px; border: 1px solid red;} img{ width: 100%; height: 100%; display: none;}<div id="wai" onmouseover="qing()" onmouseout="hui()"> <img src="timg.jpg"/style="display: block;"> <img src="timg1.jpg"/> <img src="timg2.jpg"/> <img src="timg3.jpg"/></div>
添加4个圆点和左右方向
<!--四个点的div--><div id="dianbox"><div class="dian" style="border-color: green;" onclick="yuan(this,'0')" onmouseover="qing()" onmouseout="hui()"></div><div class="dian" onclick="yuan(this,'1')" onmouseover="qing()" onmouseout="hui()"></div><div class="dian" onclick="yuan(this,'2')" onmouseover="qing()" onmouseout="hui()"></div><div class="dian" onclick="yuan(this,'3')" onmouseover="qing()" onmouseout="hui()"></div></div><!--左箭头div--><div id="lbox" onclick="zuoyou(-1)" onmouseover="qing()" onmouseout="hui()"><br><div id="l"></div></div><!--右箭头div--><div id="lbox" onclick="zuoyou(-1)" onmouseover="qing()" onmouseout="hui()"><br><div id="l"></div></div>
3.写js
先定义计时器、写清除计时器函数和恢复计时器函数
定义计时器var timer = setInterval("lun()",2000);清除计时器函数function qing(){ window.clearInterval(timer);}恢复计时器函数function hui(){ timer = setInterval("lun()",2000);}写轮播函数并且换图时圆点变色
function lun(){ // 图片轮播 bs++; var img = document.getElementsByTagName("img"); if(bs>= img.length){ bs=0; } for (i = 0;i<img.length;i++) { img[i].style.display="none"; } img[bs].style.display="block";// 圆点变色 var dian = document.getElementsByClassName("dian"); for (j = 0;j < img.length;j++) { dian[j].style.borderColor="red"; } dian[bs].style.borderColor="green";}鼠标点击圆点实现圆点变色并切换到相应图片
//点圆换图清除定时器 function yuan(x,y){ bs=y; var img = document.getElementsByTagName("img"); for(i = 0;i<img.length;i++){ img[i].style.display="none"; } img[y].style.display="block"; var dian = document.getElementsByClassName("dian"); for (j = 0;j<dian.length;j++) { dian[j].style.borderColor="red"; } x.style.borderColor="green"; }鼠标点击方向实现切换到上一张或下一张图片并实现圆点的变化
function zuoyou(z){ bs=bs+z; if(bs==4){ bs=0; } if(bs<0){ bs=3; } var img = document.getElementsByTagName("img"); for(i = 0;i<img.length;i++){ img[i].style.display="none"; } img[bs].style.display="block"; var dian = document.getElementsByClassName("dian"); for (j=0;j<dian.length;j++) { dian[j].style.borderColor="red"; } dian[bs].style.borderColor="green";}感谢各位的阅读！关于“css如何实现带箭头和圆点的轮播”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
