码迷,mamicode.com
首页 > 其他好文 > 详细

带箭头和圆点的轮播

时间:2018-08-27 23:17:24      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:info   tran   鼠标   win   set   css   ++   float   bsp   

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

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";
}

 

带箭头和圆点的轮播

标签:info   tran   鼠标   win   set   css   ++   float   bsp   

原文地址:https://www.cnblogs.com/cgj1994/p/9545262.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!