css如何实现带箭头和圆点的轮播

这篇文章给大家分享的是有关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 class="lazy" data-src="timg.jpg"/style="display: block;">    <img class="lazy" data-src="timg1.jpg"/>    <img class="lazy" data-src="timg2.jpg"/>    <img class="lazy" data-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如何实现带箭头和圆点的轮播”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！