JavaScript：简单轮播图实现方式(容器居中浏览器)

最新推荐文章于 2024-06-24 00:21:01 发布

_Yoke

最新推荐文章于 2024-06-24 00:21:01 发布

阅读量679

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_40896997/article/details/97617993

版权

JavaScript 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1.效果展示

在这里插入图片描述

2.实现需求

点击按钮弹出轮播模块
鼠标放在轮播图上停止轮播，移开开始轮播（焦点事件）
图片下标随轮播变化

3.代码模块

具体如何实现看代码注释

window.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window</title>
		<link rel="stylesheet" type="text/css" href="css/window.css"/>
		<script src="js/window.js" type="text/javascript" charset="utf-8"></script>
	</head>
	
	<body>
		<div id="all">
			<div id="buts">
			
				<button id="but1" disabled='true' type="button" onclick="openMy()">点我拿大奖</button>
				<button id="but2" disabled='true' type="button" onclick="stopMy()">stop</button>
				<button id="but3" disabled='true' type="button" onclick="startMy()">start</button>
			</div>
			
			<div id="dialog">
				
				<div id="imgs"  onmouseover="stopMy()" onmouseout="startMy()">
			         <img src="img/ad1.png" alt="">
			         <img src="img/ad2.png" alt="">
			        <!-- <img src="img/ad3.jpg" alt=""> -->
			         <img src="img/ad4.jpg" alt=""> 
			     </div>
			     <ul id="nums">
			         <li>1</li>
			         <li>2</li>
			         <li>3</li>
			         
			     </ul>
				<div id="foot">
					<button type="button" onclick="closeMy()">关闭</button>		
				</div>
			</div>
		</div>
				
	</body>
</html>

window.js

循环只显示单张图片，通过display样式实现轮播显示

注意： window.getComputedStyle（）方式获取样式像素值是带单位的，计算时要做好处理；你也可以通过offsetWidth,offsetHight获取容器大小，这里获取的值不带像素单位。

			/**
			 * 给按钮一个点击事件,弹出一个页面或者对话框，并居中浏览器，随浏览器容器大小变化而变化。
			 */
			
			function openMy(){
				var d = [document,window];
				console.log(d); 
				//浏览器的可视高度和宽度
				var h = document.documentElement.clientHeight;
				var w = document.documentElement.clientWidth;
				var dialog = document.getElementById('dialog');
                dialog.style.display = 'block';
                
				//获取本身容器的大小带px单位
				/* var cw = window.getComputedStyle(dialog,null).width;
				var ch =window.getComputedStyle(dialog,null).height;
				 console.log(parseInt(cw))
				dialog.style.left = parseInt((w/2))-parseInt((cw/2))+'px';
				dialog.style.top = parseInt((h/2))-parseInt((ch/2))+'px';
				console.log(parseInt(cw/2)) */
				
				//不带单位
				var cw = document.all.dialog.offsetWidth;
				var ch =document.all.dialog.offsetHeight;
				 console.log(parseInt(cw))
				dialog.style.left = parseInt((w/2))-parseInt((cw/2))+'px';
				dialog.style.top = parseInt((h/2))-parseInt((ch/2))+'px';		
			}
			
			var index = 0;//默认显示第一张
			/**
			 * 轮播显示图片
			 */
			function showImg(){	
				//获取所有图片
				var imgs = document.getElementById('imgs').getElementsByTagName('img');
				//获取li标签
				var lis = document.getElementById('nums').getElementsByTagName('li');
					//循环图片，通过display样式实现轮播显示
					for(var i = 0; i < imgs.length; i ++){
						if(i == index){
							imgs[i].style.display = 'block';
							lis[i].style.backgroundColor ='#FFFFFF';
						}else{
							imgs[i].style.display = 'none';
							lis[i].style.backgroundColor = '#808080';
							
						}
							console.log(i)
					}	
					index ++;
						
					if(index >= imgs.length){
						index = 0;
					}
				}
				
						
			/**
			 * 停止轮播
			 */
			function stopMy(){
				window.setTimeout(function(){
					if(null != time){
						window.clearInterval(time);
						//清除定时器
						time = null;
					}
				},300)
				
			}
			
			var time = null;
			/**
			 * 开始轮播
			 */
			function startMy(){
				if(time == null){
					 time = window.setInterval(showImg,2000);
					console.log(time)
					
				}
			}
			
			
			//页面失去焦点开始
			onblur = function() {
				time = null;
				startMy();
			}
			//页面获取焦点时停止
			onfocus = function() {
				
				stopMy()
			}
			
			//关闭弹窗
			 function closeMy(){
			     var dialog = document.getElementById('dialog');
			    dialog.style.display = 'none';
				
			}
			//页面加载函数
			window.onload = function(){
				//获取按钮，页面加载完成之后将其设置为可被点击
				var button1 = document.getElementById('but1');
				console.log([button1])
				button1.disabled = false;
				var button2 = document.getElementById('but2');
				button2.disabled = false;
				var button3 = document.getElementById('but3');
				button3.disabled = false;
				//console.log([button1]);//打印查看里面的元素
				startMy();
				
				//给li绑定事件实现点击直接定位那张图片
                var lis = document.getElementById('nums').getElementsByTagName('li');
                for(var i = 0 ; i < lis.length; i ++){
                    lis[i].onclick = function(){
                         index = parseInt(this.innerHTML) -1;//将index重新赋值,重新调用showImg函数
                         showImg();
                    }
                }
				
			}
			
				//监听窗体变化
				window.onresize = function(){
				var dialog = document.getElementById('dialog');
				var h = document.documentElement.clientHeight;
				var w = document.documentElement.clientWidth;
				
				
				var cw = document.all.dialog.offsetWidth;
				var ch =document.all.dialog.offsetHeight;

				dialog.style.left = parseInt((w/2))-parseInt((cw/2))+'px';
				dialog.style.top = parseInt((h/2))-parseInt((ch/2))+'px';
				
				
			}

window.css

	*{
                padding: 0;
                margin: 0;
				
            }
			#all{
				width: 100%;
				height: 80%;
				margin: 0 auto;
			}
			#dialog{
				
				width:25rem;
				height: 14.0625rem;
				top: 6.25rem;
				left: 0;
				margin-top: -120px;
				background: beige;
				position: relative;
				display: none;
				box-shadow: 0.3125rem 0.3125rem 0.1875rem gray;
			}
			 #imgs{
				 
				 width:100%;
				 height:100%
				 padding-top: 50px;
				 overflow: hidden;
            }
			#imgs img{
				
				width:100%;
				height: 14.0625rem;
				cursor: pointer;
				
				
			}
            #nums {
               position: absolute; 
			   left: 3%;
			   bottom: 10%;
            }
            #nums li {
                list-style: none;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                margin-right: 5px;
                background-color: #808080;
                cursor: pointer;
                float: left;
                opacity: 0.9;
            }
			
			#buts{   
					width: 300px; 
					height: 75px;
					border: 1px solid burlywood;
					 margin: 0 auto; 
					 margin-top: 8%;
					text-align: center;
					box-shadow: 0.3125rem 0.3125rem 0.1875rem gray;		
				
			}
			#buts button{
				margin: 1%;
				margin-top: 20px;
				text-align: center;
			}
			
			#foot{
				position: absolute;
				width:30% ;
				text-align: right;	
				right: 0rem;
				bottom: 0rem;
			}

_Yoke

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
JavaScript：简单轮播图实现方式(容器居中浏览器)

1.效果展示2.实现需求点击按钮弹出轮播模块鼠标放在轮播图上停止轮播，移开开始轮播（焦点事件）图片下标随轮播变化3.代码模块具体如何实现看代码注释window.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>window&l...
复制链接

扫一扫

专栏目录