带箭头和圆点的轮播

Posted 2021-01-01 cgj1994

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

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

css代码
#wai{
	width:300px;
	height: 300px;
	border: 1px solid red;
}	
img{
	width: 100%;
	height: 100%;
	display: none;
}
html代码
<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个圆点和左右方向

	css代码		
　　　　　　　　　　　　　　#dianbox{
				height: 15px;
				width: 70px;
				position: absolute;
				border: 1px solid red;
				left: 120px;
				top: 270px;
			}
			.dian{
				width: 10px;
				height: 10px;
				border-radius: 50%;
				margin-left: 4px;
				border: 1px solid red;
				float: left;
			}
			#lbox{
				width: 25px;
				height: 75px;
				border: 1px solid red;
				position: relative;
				top: -185px;
				left: 10px;
			}
			#rbox{
				width: 25px;
				height: 75px;
				border: 1px solid red;
				position: relative;
				top: -260px;
				right: -260px;
			}
			#l{
				width: 25px;
				height: 25px;
				border: 2px solid red;
				border-right: hidden;
				border-top: hidden;
				transform: rotate(45deg);
				margin:20px 10px;
				
			}
			#r{
				width: 25px;
				height: 25px;
				border: 2px solid red;
				border-left: hidden;
				border-bottom: hidden;
				transform: rotate(45deg);
				margin:20px -10px;
			}
　　　　html代码
<!--四个点的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()">
            <div id="l">
                
            </div>
        </div>

<!--右箭头div-->
        <div id="rbox" onclick="zuoyou(1)"onmouseover="qing()" onmouseout="hui()">
            <div id="r">
                
            </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";
}