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

功能：图片轮播，当鼠标移入图片、圆点和方向键时，停止轮播，移除恢复。

1.首先建立div，并放入图片

#wai{    width:300px;    height: 300px;    border: 1px solid red;}   img{    width: 100%;    height: 100%;    display: none;}

<div id="wai" onm ouseover="qing()" onm ouseout="hui()">    <img src="timg.jpg"/style="display: block;">    <img src="timg1.jpg"/>    <img src="timg2.jpg"/>    <img src="timg3.jpg"/></div>

2.添加4个圆点和左右方向

<!--四个点的div--><div id="dianbox"><div class="dian" style="border-color: green;" onclick="yuan(this,0)" onm ouseover="qing()" onm ouseout="hui()"></div><div class="dian" onclick="yuan(this,1)" onm ouseover="qing()" onm ouseout="hui()"></div><div class="dian" onclick="yuan(this,2)" onm ouseover="qing()" onm ouseout="hui()"></div><div class="dian" onclick="yuan(this,3)" onm ouseover="qing()" onm ouseout="hui()"></div></div>

<!--左箭头div--><div id="lbox" onclick="zuoyou(-1)" onm ouseover="qing()" onm ouseout="hui()"><br><div id="l"></div></div>

<!--右箭头div--><div id="lbox" onclick="zuoyou(-1)" onm ouseover="qing()" onm ouseout="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";}

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。