轮播图（透明度）⭐⭐⭐

调用的js

function animate(dom,options,callback){  
	// 遍历对象属性  
	for (var attr in options){    
		// 获取元素当前的attr值    
		if (attr === 'opacity') {      
			// 获取当前元素的透明度*100      
			var current = parseInt( getComputedStyle(dom)[attr]*100 )      
			var target = options[attr]*100    
		} else if (attr.indexOf('scroll') !== -1){      
			var current = dom[attr]      
			var target = options[attr]    
		} else {      
			var current = parseInt( getComputedStyle(dom)[attr] )      
			var target = options[attr]    
		}    
		options[attr] = {      
			'current': current,      
			'target': target    
		}    
		// 目标数据结构:    
		// options = {    
		//   'width': {    
		//     'current': 100,    
		//     'target': 300    
		//   },    
		//   'height': {    
		//     'current': 100,    
		//     'target': 300    
		//   },    
		//   ...    
		// }  
	}
 	 clearInterval(dom.timer)  
 	 dom.timer = setInterval(function (){    
 	 	// 遍历对象，取出数据    
 	 	for (var attr in options){      
 	 		var current = options[attr].current      
 	 		var target = options[attr].target      
 	 		// 持续变化的速度      
 	 		var speed = (target - current)/10      
 	 		// 浮点数计算会造成结果有偏差，可能造成数据丢失：取整      
 	 		// 判断运动方向取整      
 	 		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
      			// 临界值判断：剩余运动量<=每次的运动量      
      			if ( Math.abs( target - current ) <= Math.abs(speed) ) {        
      				// 到达终点        
      				if (attr === 'opacity') {          
      					dom.style[attr] = target/100 // 立即到达终点        
      				} else if (attr.indexOf('scroll') !== -1) {          
      					dom[attr] = target        
      				} else {          
      					dom.style[attr] = target + 'px'        
      				}
        			// 删除已运动完成的属性        
        			delete options[attr]
        			for (var attr in options){          
        				// 还有其他属性没运动完成，提前结束当前程序，不清除计时器          
        				return false;        
        			}        
        			//如果有回调函数，则执行回调函数        
        			typeof callback === 'function'? callback() : ''        
        			clearInterval(dom.timer) // 清除计时器      
        		} else {        
        			// 未到达终点        
        			options[attr].current += speed        
        			if (attr === 'opacity') {          
        				dom.style[attr] = options[attr].current/100        
        			} else if (attr.indexOf('scroll') !== -1) {          
        				dom[attr] = options[attr].current        
        			} else {          
        				dom.style[attr] = options[attr].current + 'px'        
        			}      
        		}    
        	}  
        },20)}

样式css

	<style>
		*{  margin: 0;  padding: 0;  list-style: none;}
		.wrap{  width: 500px;  height: 340px;  margin: 50px auto 0;  position: relative;}
		.main{  width: 500px;  height: 340px;  position: relative;}
		.main img{  width: 500px;  height: 340px;  position: absolute;  left: 0;  top: 0;  opacity: 0.1;}
		.prev{  width: 20px;  height: 20px;  line-height: 20px;  text-align: center;  background-color: lightcoral;  position: absolute;  left: 0;  top: 50%;  margin-top: -10px;  cursor: pointer;  z-index: 99;}
		.next{  width: 20px;  height: 20px;  line-height: 20px;  text-align: center;  background-color: lightcoral;  position: absolute;  right: 0;  top: 50%;  margin-top: -10px;  cursor: pointer;  z-index: 99;}
		.nums{  position: absolute;  left: 30px;  bottom: 10px;  z-index: 99;}
		.nums li{  width: 20px;  height: 20px;  line-height: 20px;  text-align: center;  border-radius: 50%;  cursor: pointer;  margin: 0 2px;  background-color: lightgreen;  float: left;}
		
		/* 当前显示的样式 */
		.main img.show{  z-index: 10;}.nums li.active{  background-color: lightcoral;}
</style>

样式html

	<div class="wrap">  
		<!-- 放置相片盒子 -->  
		<div class="main">    
		<img class="show" src="./imgs/c1.jpg" alt="">    
		<img src="./imgs/c2.jpg" alt="">    
		<img src="./imgs/c3.jpg" alt="">    
		<img src="./imgs/c4.jpg" alt="">    
		<img src="./imgs/c5.jpg" alt="">    
		<img src="./imgs/c6.jpg" alt="">  
	</div>  
	<!-- 左右换 -->  
	<p class="prev"><</p>  
	<p class="next">></p>  
	<!-- 选项卡 -->  
	<ul class="nums">    
		<li class="active">1</li>    
		<li>2</li>    
		<li>3</li>    
		<li>4</li>    
		<li>5</li>    
		<li>6</li>  
	</ul></div>

事件调用

	<script>
		var imgs = document.querySelectorAll('.main img')
		var prev = document.querySelector('.prev')
		var next = document.querySelector('.next')
		var lis = document.querySelectorAll('.nums li')
		var showIndex = 0 // 当前显示图片的下标
		var timer;//定时器

		// 自动播放
		animate(imgs[showIndex],{'opacity':1},function (){  
			timer = setInterval(function (){    
				moveNext()//播放下一张  
			},2000)})
		// 播放下一张
		function moveNext(){  
			// 去掉上一张的样式  
			imgs[showIndex].className = ''  
			lis[showIndex].className = ''  
			imgs[showIndex].style.opacity = 0.1
			showIndex++  
			if (showIndex >= imgs.length) {    
				showIndex = 0  
			}  
			// 下一张图片添加类名  
			imgs[showIndex].className = 'show'  
			lis[showIndex].className = 'active'  
			animate(imgs[showIndex],{'opacity':1})
		}
		// 播放上一张
		function movePrev(){  
			// 去掉上一张的样式  imgs[showIndex].className = ''  
			lis[showIndex].className = ''  
			imgs[showIndex].style.opacity = 0.1
  			showIndex--  
  			if (showIndex < 0) {    
  				showIndex = imgs.length-1  
  			}  
  			// 下一张图片添加类名  
  			imgs[showIndex].className = 'show'  
  			lis[showIndex].className = 'active'  
  			animate(imgs[showIndex],{'opacity':1})
  		}
		// 点击上一页
		prev.onclick = function (){  
			// 清除当前所有计时器  
			clearInterval(timer)  
			clearInterval(imgs[showIndex].timer)
			movePrev()
  			// 控制结束2秒后自动播放  
  			timer = setInterval(function (){    
  				moveNext()  },2000)
  			}
			// 点击下一页
			next.onclick = function (){  
				// 清除当前所有计时器  clearInterval(timer)  
				clearInterval(imgs[showIndex].timer)
 				moveNext()
				// 控制结束2秒后自动播放  
				timer = setInterval(function (){    
					moveNext()  
				},2000)
			}
			// 点击数字圆点切换图片
			for (var i = 0, len = lis.length; i < len; i++){  
				lis[i].index = i  
				lis[i].onclick = function (){    
					// 清除当前所有计时器    
					clearInterval(timer)    
					clearInterval(imgs[showIndex].timer)
    				// 去掉上一张的样式    
    				imgs[showIndex].className = ''    
    				lis[showIndex].className = ''    
    				imgs[showIndex].style.opacity = 0.1
    				showIndex = this.index
   				// 下一张图片添加类名    
   				imgs[showIndex].className = 'show'    
   				lis[showIndex].className = 'active'    
   				animate(imgs[showIndex],{'opacity':1})
    				// 控制结束2秒后自动播放    
    				timer = setInterval(function (){      
    					moveNext()    
    				},2000)  
    			}
    		}
</script>