前端js——京东，天猫轮播图模板，圆点事件（移入圆点显示对应图片），鼠标移入移出

最新推荐文章于 2022-07-05 20:11:08 发布

不要生病~

最新推荐文章于 2022-07-05 20:11:08 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： js 轮播图圆点鼠标定时

本文链接：https://blog.csdn.net/qq_41141657/article/details/88877410

版权

前端专栏收录该内容

35 篇文章 1 订阅

订阅专栏

效果图

在这里插入图片描述

1.页面布局

将图片和圆点都放在一个大div中

<div id="box">
			<img src="../HTML/img/1.jpg" />
			<img src="../HTML/img/2.jpg" />
			<img src="../HTML/img/3.jpg" />
			<img src="../HTML/img/4.jpg" />
			<img src="../HTML/img/5.jpg" />
			<img src="../HTML/img/6.jpg" />
			<!--原点-->
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

2.页面样式

1）设置大div宽高，相对定位

#box{
				width: 730px;
				height: 300px;
				border: 4px solid black;
				margin: 30px auto;
				position: relative;
			}

2）将图片绝对定位在div中,清除图片的位置，使全部图片不显示,单独使第一张显示

#box img{
				position: absolute;
				left: 0;
				top:0;
				display: none;
			}

3）定位小圆点

#box ul{
				position: absolute;
				left: 330px;
				bottom: 15px;
			}

4）小圆点左浮动,加圆角

#box ul li{
				width: 12px;
				height: 12px;
				background: white;
				list-style: none;
				float: left;
				margin-left: 8px;
				border-radius: 50%;
			}

3.js定时器

1)声明一下id
2)控制第几个图片显示,如果要通过多种途径控制一个效果，最好用统一的一个变量进行控制

var i=0;

3)设置定时器

var time=setInterval(function(){
    i++;
},2000)

4)i号图片显示,其他图片隐藏，先将所有图片都隐藏在显示

if(i==6){
			i=0;
     		}
		for(var x=0;x<6;x++){
		imgs[x].style.display="none";
		}
		imgs[i].style.display="block";

5）i号圆点变红,其他圆点为白色
（方法同四）

4.鼠标事件

1）获取每个圆点的序号

for(var x=0;x<list.length;x++){
    list[x].hao=x;
}

2）给所有的圆点加鼠标移入事件

list[x].function(){
}

3）移入后清除定时器

clearInterval(time);

4）获取序号，显示对应的图片和使移入的圆点变红

i=this.hao;
			    		for(var x=0;x<6;x++){
					    imgs[x].style.display="none";
					    list[x].style.background="white";
				        }
				        imgs[i].style.display="block";
				        list[i].style.background="red";

5）给所有的圆点加鼠标移出事件

list[x].function(){
//			    		重新设置定时器
			    		time=setInterval(run,2000)
			    	}

5.源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				width: 730px;
				height: 300px;
				border: 4px solid black;
				margin: 30px auto;
				position: relative;
			}
			#box img{
				position: absolute;
				left: 0;
				top:0;
				display: none;
			}
			
			#box ul{
				position: absolute;
				left: 330px;
				bottom: 15px;
			}
			#box ul li{
				width: 12px;
				height: 12px;
				background: white;
				list-style: none;
				float: left;
				margin-left: 8px;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="../HTML/img/1.jpg" style="display: block;"/>
			<img src="../HTML/img/2.jpg" />
			<img src="../HTML/img/3.jpg" />
			<img src="../HTML/img/4.jpg" />
			<img src="../HTML/img/5.jpg" />
			<img src="../HTML/img/6.jpg" />
			<!--原点-->
			<ul>
				<li style="background: red;"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
		
		
		<script>
			var box=document.getElementById("box");
			var list=box.getElementsByTagName("li");
			var imgs=box.getElementsByTagName("img");
			var i=0;

			function run(){
				i++; 				
				if(i==6){
					i=0;
				}
				for(var x=0;x<6;x++){
					imgs[x].style.display="none";
					list[x].style.background="white";
				}
				imgs[i].style.display="block";
				list[i].style.background="red";
			}
			
			var time=setInterval(run,2000)

			    for(var x=0;x<list.length;x++){
			    	//获取每个圆点的序号
			    	list[x].hao=x;
			    	list[x].function(){
			    		//移入停止定时器
			    		clearInterval(time);
			    		//对应序号圆点变红
			    		i=this.hao;
			    		for(var x=0;x<6;x++){
					    imgs[x].style.display="none";
					    list[x].style.background="white";
				        }
				        imgs[i].style.display="block";
				        list[i].style.background="red";
			    	}
			    	
			    	list[x].function(){
			    		time=setInterval(run,2000)
			    	}
			    	
			    }
			    
			
			
			
		</script>
	</body>
</html>

不要生病~

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
前端js——京东，天猫轮播图模板，圆点事件（移入圆点显示对应图片），鼠标移入移出

1.页面布局将图片和圆点都放在一个大div中<div id="box"> <img src="../HTML/img/1.jpg" /> <img src="../HTML/img/2.jpg" /> <img src="../HTML/img/3.jpg" /> <img src="../HTML/img/4.j...
复制链接

扫一扫

专栏目录