透明度变化的轮播图

**

透明度变化的轮播图

**

一、简单介绍

轮播图是前端学习中常用的案例，通过各式各样的轮播图我们可以对JS的基础知识进行实践
下面是我在学习中所写的透明度轮播图
实际中获取更多炫酷效果的轮播图可以访问Swiper中文网

二、基本模块介绍

1.HTML部分

（1）.先写一个div作为轮播图板块的主体
（2）.写一个列表来存n张图
（3）.写两个按钮来控制前进和后退（为了更好的样式，我用两个div添加click事件来代替）
（4）.图片下方的圆点序号

html代码

		<div id="slider"> 			<ul id="list"> 				<li class="item"><img src="img/1.jpg"></li> 				<li class="item"><img src="img/2.jpg"></li> 				<li class="item"><img src="img/3.jpg"></li> 				<li class="item"><img src="img/4.jpg"></li> 				<li class="item"><img src="img/5.jpg"></li> 			</ul> 			<div id="left" class="button"><</div> 			<div id="right" class="button">></div> 			<ul id="pic"> 				<li class="bullet focus">1</li> 				<li class="bullet">2</li> 				<li class="bullet">3</li> 				<li class="bullet">4</li> 				<li class="bullet">5</li> 			</ul> 		</div> 

2.CSS部分

（1）.主div（slider）的大小及位置（在这里要用相对位置relative）
（2）.图片（item）的大小，位置（相对位置absolute，此时可将几张图片由纵向排列改为叠在一起1），透明度
（3）.左右按钮（button）及下方圆点序号（bullet）的大小，透明度，位置，浮动

css代码

*{ 	margin: 0; 	padding: 0; } ul { 	list-style: none; } #slider { 	width: 700px; 	height: 500px; 	position: relative; 	left: 700px; 	top: 100px; } #slider .item { 	position: absolute; 	left: 0; 	top: 0; 	opacity: 0; } #slider .item:first-of-type{ 	opacity: 1; } .item img { 	width: 700px; 	height: 500px; 	display: block; } #slider .button { 	height: 70px; 	width: 50px; 	background-color: black; 	position: absolute; 	top: 220px; 	color: white; 	text-align: center; 	line-height: 70px; 	font-size: 30px; 	opacity: 0.2; 	cursor: pointer;        } #slider #left { 	left: 0; }  #slider #right { 	 	right: 0; }  #slider #pic { 	position: relative; 	top: 450px; 	left: 230px; } #slider #pic .bullet { 	width: 20px; 	height: 20px; 	border-radius: 50%; 	background-color: black; 	float: left; 	margin-left: 15px; 	opacity: 0.2; 	color: white; 	text-align: center; 	line-height: 20px; 	cursor: pointer; } #slider #pic .bullet.focus { 	opacity: 0.6; } 

下面是框架的大概形式（图片我用红色背景来代替）

3.JavaScript部分

（1）.获取样式的函数（兼容IE）

function getstyle(el,property){                                 //获取样式（兼容IE） 	if(getComputedStyle){ 		return getComputedStyle(el)[property]; 	}else{ 		return el.currentStyle[property]; 	} }  

（2）.动画函数
这是整个轮播图的灵魂部分，可将目标从当前样式逐渐变为指定样式

函数代码

function animate(el,properties){                                //动画函数，从获取位置property运动到指定位置target 	clearInterval(el.timerId);                                  //清空上个定时器，以免重复 	el.timerId=setInterval(function(){                          //在20ms内执行动画函数 		for(var property in properties){                        //propertys为一个对象，可同时改变多个值（宽、高、透明度......) 			var current; 			var target = properties[property]; 			if(property === 'opacity'){                         //透明度为小数且没单位，算法不同 				current = Math.round(parseFloat(getstyle(el,'opacity')) * 100); 			}else{ 				current = parseInt(getstyle(el,property)); 			} 			var speed = (target-current) / 30;                 //速度先快后慢 			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 			if(property === 'opacity'){ 				el.style.opacity = (current + speed) / 100; 			}else{ 				el.style[property] = current + speed + 'px'; 			} 		} 				 	},20) } 

例：将100×100，透明度为1的红色正方形变为200×300透明度0.5的正方形

		var d = document.getElementById('A'); 		animate(d,{ 			width:200, 			height:300, 			opacity:50 		}); 

（3）.切换函数
利用上面动画函数，将当前图片透明度由1变0，目标图片由0变1

function sliderPre(){                                               //前一张 	preIndex = nextIndex; 	nextIndex--; 	if(nextIndex == -1){                                            //第一张的前一张是最后一张 		nextIndex = len-1;             	} 	sliderTo(preIndex,nextIndex); 	 }  function sliderNext(){                                             //下一张 	preIndex = nextIndex; 	nextIndex++; 	if(nextIndex == len){                                          //最后一张的下一张是第一张 		nextIndex = 0; 	} 	sliderTo(preIndex,nextIndex); }  function sliderTo(pre,next){                                       //切换函数（用于上一张、下一张函数内来进行图片切换   	var bullets = document.getElementsByClassName("bullet");       //当前图片序号作为焦点被点亮 	bullets[pre].className = "bullet"; 	bullets[next].className = "bullet focus"; 	 	var lis = document.getElementsByClassName("item"); 	animate(lis[pre],{opacity:0});                                 //前一张透明度变为0 	animate(lis[next],{opacity:100});                              //后一张透明度变为1 } 

（4）.当无鼠标点击时，自动轮播及停止

function auto(){                                                   //自动轮播 	clearInterval(id);                                             //清空之前定时器以免重复 	id=setInterval(function(){                                     //定时器自动轮播下一张 		sliderNext(); 	},2000) }  function stopAuto(){                                                //停止自动轮播 	clearInterval(id); } 

（5）.当鼠标放在左右切换键头上时，箭头透明度变大

function focus(){                                                   //当鼠标放在左右箭头上时，箭头被点亮 	var buttons = document.getElementsByClassName("button"); 	var bullets = document.getElementsByClassName("bullet"); 	 	buttons[0].onmouseover = function(){ 		buttons[0].style.opacity = 0.8; 	} 	buttons[1].onmouseover = function(){ 		buttons[1].style.opacity = 0.8; 	} 	buttons[0].onmouseout = function(){ 		buttons[0].style.opacity = 0.2; 	} 	buttons[1].onmouseout = function(){ 		buttons[1].style.opacity = 0.2; 	} 	 	 } 

（6）.轮播函数
将自动轮播，点击左右按键轮播及点击下方序号按钮轮播结合起来

function play(){                                                    //轮播播放函数 	preIndex = 0; 	nextIndex = 0; 	len = document.getElementsByClassName("item").length; 	 	focus(); 	 	document.getElementById("left").onclick = function(){           //点击向右向右箭头时图片变化 		sliderPre(); 	} 	document.getElementById("right").onclick = function(){ 		sliderNext(); 	} 	 	var bullets=document.getElementsByClassName("bullet");          //点击下方序号时图片变化 	for(var i = 0;i < bullets.length;i++){ 		bullets[i].index = i; 		bullets[i].onclick = function(){ 			preIndex = nextIndex; 			nextIndex = this.index; 			sliderTo(preIndex,nextIndex); 		} 	} 	 	auto();                                                         //自动轮播 	var slider = document.getElementById("slider"); 	slider.onmouseover = function(){                                //鼠标放上时停止自动轮播 		stopAuto(); 	} 	slider.onmouseout = function(){                                 //鼠标拿下时开始 		auto(); 	} } 

工程可通过以下链接下载点击下载

来源：CSDN

作者：Kepler_X

链接：https://blog.csdn.net/Kepler_X/article/details/103236787