css实现带箭头和圆点的轮播
建站知识 2021-07-03 07:55www.168986.cn长沙网站建设
功能图片轮播,当鼠标移入图片、圆点和方向键时,停止轮播,移除恢复。
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"; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:CSS实现图片等比例缩小不变形的实例代码
下一篇:23种CSS垂直居中技巧
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML