功能:图片轮播,当鼠标移入图片、圆点和方向键时,停止轮播,移除恢复。
1.首先建立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>
2.添加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,箭头轮播,圆点轮播
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
千金楼资源网 Copyright www.htabc.com
暂无“css实现带箭头和圆点的轮播”评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]