js轮播

蔚落 2021-09-18 18:40 450阅读 0赞

# js轮播 #

**轮播：指的是图片间隔n秒循环性的播放  
知识点：if/else、for语句、DOM操作、事件绑定、定时器**

这里简单说明一下js所做的事情的思路：  
1、单击箭头事件：单击便会执行判断和循环并添加一个类和调用函数。

2、底部的数字导航事件：效果是点击显示相应的图片，分别是循环buttons类下的全部li，做一个单击当前下标(图片)所有触发的添加类事件。

3、自动播放：首先定义一个timer变量用来保存setInterval;setInterval函数里面调用了单击下一张图片函数。

4、鼠标滑入事件/鼠标滑出事件：目的是停留在某张图片，停止自动播放和恢复自动播放;当鼠标滑入时则触发onmouseenter,滑出触发onmouseleave。

5、点击图片放大：循环全部img的上一级全部li，并做了单击当前下标（图片）事件 便会执行里面的函数在DIV.imgadd里面使用innerHTML的方式将当前被点击的li里面的img标签插入到DIV.imgadd里面并添加了imgwidth类

**最终效果：**  
![在这里插入图片描述][20190408164544281.gif]

示意图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]

1.  **HTML**
    
        <div class="imgadd"></div>
        <div class="box">
        	<div class="wrap">
        		<ul>
        			<li class="shows"><img src="img/1.jpeg" alt=""></li>
        			<li><img src="img/2.jpeg" alt=""></li>
        			<li><img src="img/3.jpeg" alt=""></li>
        			<li><img src="img/4.jpeg" alt=""></li>
        			<li><img src="img/5.jpeg" alt=""></li>
        			<li><img src="img/6.jpeg" alt=""></li>
        		</ul>
        	</div>
        	<a href="javascript:;" class="btn btn_left"><img src="img/jiantou_zuo.png" alt=""></a>
        	<a href="javascript:;" class="btn btn_right"><img src="img/jiantouzuo.png" alt=""></a>
        	<div class="buttons">
        		<ul>
        			<li class="on">1</li>
        			<li>2</li>
        			<li>3</li>
        			<li>4</li>
        			<li>5</li>
        			<li>6</li>
        		</ul>
        	</div>
        </div>
2.  **CSS**
    
        *{padding: 0;margin:0;}
        .box{
        	position: relative;
        	margin: 50px auto;
        	width: 600px;
        	height: 354px;
        	overflow: hidden;
        	box-shadow: darkgrey 10px 10px 30px 5px;/*边框阴影*/
        }
        .wrap{
        	z-index: 1;
        	width: 3600px;
        	height: 354px;
        }
        //这里设置的绝对定位，让图片叠在一起了，所以跟上面的示意图不一样了。
        .wrap ul li{
        	position: absolute;
        	left: 0;
        	top: 0;
        	display: block;
        	float: left;
        	list-style: none;
        	text-decoration: none;
        	opacity: 0;
        	transition: 1s;
        }
        .wrap ul li.shows{
        	z-index: 2;
        	opacity: 1;
        	cursor: pointer;
        }
        .wrap ul li img{
        	width: 100%;
        	height: 100%;
        }
        .wrap ul li.opaitys{
        	opacity: 1;
        }
        .btn{
        	z-index: 2;
        	position: absolute;
        	width: 50px;
        	height: 50px;
        	top: 50%;
        	margin-top: -25px;
        	display: block;
        }
        .btn img{
        	width: 100%;
        	height: 100%;
        	display: block;
        }
        .btn_left{
        	left: 20px;
        }
        .btn_right{
        	right: 20px;
        }
        .buttons{
        	z-index: 2;
        	position: absolute;
        	left: 50%;
        	bottom: 20px;
        	margin-left: -125px;
        	height: 20px;
        }
        .buttons ul li{
        	float: left;
        	margin: 0 16px;
        	width: 20px;
        	height: 20px;
        	background: black;
        	border-radius: 50%;
        	color: white;
        	list-style: none;
        	text-align: center;
        	line-height: 20px;
        	font-size: 12px;
        	cursor: pointer;
        }
        .buttons ul li.on{
        	font-weight: bold;
        	color: red;
        	font-size: 14px;
        }
        .imgwidth img{
        	width: 100%;
        	height: 100%;
        	display: block;
        }
        .imgadd{
        	width: 100%;
        	height: 100%;
        	z-index: 1;
        	position: absolute;
        	top: 0;
        }
        .imgwidth{
        	z-index: 3;
        	width: 100%;
        	height: 100%;
        	position: absolute;
        	top: 0;
        }
3.  **JS**
    
        window.onload=function(){
        	// 定义对象
        	var index = 0;
        	var timer;
        	// 获取对象
        	var box = document.querySelector(".box");			//父级
        	var next = document.querySelector(".btn_right");	//下一张图片
        	var prev = document.querySelector(".btn_left");		//上一张图片
        	var wrap = document.querySelector(".wrap").getElementsByTagName("li");	//获取图片上一级DOM
        	var imgadd = document.querySelector(".imgadd");							//图片插入
        	var buttons = document.querySelector(".buttons").getElementsByTagName("li"); //获取数字按钮
        
        	// 定义点击下一张图片函数
        	next.onclick=function(){
        		next_pioc();
        	}
        	// 定义点击上一张图片函数
        	prev.onclick=function(){
        		prev_pioc();
        	}
        
        	// 调用点击下一张图片函数
        	function next_pioc(){
        		index++;
        		if(index > 5){
        			index=0;
        		}
        		//wrap类下面的所有li类定义为空
        		for(var i = 0,len = wrap.length;i < len;i++){
        			// console.log(wrap[i]);
        			wrap[i].className="";		//全部li类为空
        		}
        		wrap[index].className="shows";	//对当前下标的li添加类
        		// 调用外围函数
        		showBtn();
        	}
        	// 调用点击上一张图片函数
        	function prev_pioc(){
        		index--;
        		if(index < 0){
        			index=5;
        		}
        		for(var i = 0,len = wrap.length;i <　len;i++){
        			wrap[i].className="";
        		}
        		wrap[index].className="shows";
        		// 调用外围函数
        		showBtn();
        	}
        
        	// 数字按钮添加样式
        	function showBtn(){
        		//buttons类下面的所有li类定义为空
        		for(var i = 0,len = buttons.length;i < len;i++){
        			buttons[i].className="";	//全部li类为空
        		}
        		buttons[index].className="on";	//对当前下标的li添加类
        	}
        
        
        	//点击数字切换至相应的图片
        	for(var i = 0,len = buttons.length;i < len;i++){
        		// console.log(buttons[i]);
        		(function(i){
        			buttons[i].onclick=function(){
        				// console.log(buttons[i]);
        				index = i;
        				// 调用外围函数
        				showBtn();	//给点击的数字按钮添加样式
        				for(var j = 0,len = wrap.length;j < len;j++){	//循环wrap类下面的所有li并定义类为空
        					wrap[j].className="";
        				}
        				wrap[index].className="shows"	//当前下标添加样式
        			}
        		})(i);
        	}
        
        
        	//自动播放
        	function autoplay(){
        		timer=setInterval(function(){	//每隔2秒执行一次next_pioc();函数
        			next_pioc();				//调用函数
        		},2000)
        	}
        	autoplay();
        	//鼠标滑入事件
        	box.onmouseenter=function(){
        		clearInterval(timer);	//clearInterval停止执行timer的自动播放
        	}
        	//鼠标滑出事件
        	box.onmouseleave=function(){
        		autoplay();				//调用函数
        	}
        
        	
        	//点击图片放大
        	function imgMax(){
        		for(var h = 0,len = wrap.length;h < len;h++){	//循环所有img标签的上一级所有li
        			// console.log(wrap[h]);
        			(function(h){
        				wrap[h].onclick=function(){				//单击当前图片事件
        					// console.log(wrap[h]);
        					imgadd.innerHTML=wrap[h].innerHTML;	//在DVI.imgadd类插入当前下标img标签
        					imgadd.className="imgwidth";		//添加类
        				}
        			})(h);
        		}
        	}
        	imgMax();
        
        	//图片隐藏
        	imgadd.onclick=function(){
        		imgadd.innerHTML="";		//不输出img
        		imgadd.className="imgadd"	//添加类
        	}
        }

[20190408164544281.gif]: /images/20210724/15d4b1ae251f466d9cceb1ecfd5bb68b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]: /images/20210724/976c87ede1944c3e8f3d97b70ff12f4f.png