使用原生js制作渐变轮播图

js制作渐变轮播图

渐变轮播图和水平轮播图不同，水平的原理是改变水平的位置再overhidden 只显示中间的一张。
可参考这个，点击进入水平轮播图
而渐变轮播则是使所有图片都重叠到一起，使第一张的透明度为1，其他图片的opacity为0，改变的上一张的下一张的透明度实现切换图片，再在其中添加渐变透明的动画即可。

我写的这个实现的动态效果按钮放在图片的左侧显示左侧按钮右侧显示右侧按钮离开图片按钮消失如上图所示，下方没有点击小圆点 ，想用的话可自行添加，可参考水平轮播的（上面有链接）。
下面的使js代码部分

<script type="text/javascript">
			window.onload = function(){
				var lis = document.getElementsByTagName("li");
				var prevIndex,nextIndex;
				prevIndex = nextIndex  = 0; //获取图片的下标,初始为0
				var left_btn = document.getElementById("left_btn");
				var right_btn = document.getElementById("right_btn");
				var btn_l = document.getElementsByClassName("btn_l");
				var btn_r = document.getElementsByClassName("btn_r");
				//切换上一张		
				
				function prev(){
					// 
					btn_l[0].onclick = function(){
						clearInterval(timerAuto);
						console.log(prevIndex);
						nextIndex = prevIndex;
						prevIndex --;
						if(prevIndex < 0){
							prevIndex = 3;
						}
						animate_JianBian(lis[nextIndex],-1);
						animate_JianBian(lis[prevIndex],1);
					}
				}
				//下一张
				function next(){
					btn_r[0].onclick = function(){
						clearInterval(timerAuto);
						console.log(nextIndex);
						nextIndex = prevIndex;
						prevIndex++;
						if(prevIndex == lis.length){
							prevIndex = 0;
						}
						animate_JianBian(lis[nextIndex],-1);
						animate_JianBian(lis[prevIndex],1);
					}
				}
				//渐变动画 flag判断op 是应该加还是减
				function animate_JianBian(obj,flag){
					var op =parseInt(getStyle(obj,"opacity"));
					var timer = setInterval(function(){
						if(flag>0){
							op+=0.01;
						}
						else{
							op-=0.01;
						}
						// console.log(op);
						obj.style.opacity = op;
						if(op<=0){
							obj.style.opacity = 0;
							clearInterval(timer);
						}
						if(op>=1){
							obj.style.opacity = 1;
							clearInterval(timer);
						}
						
					},10)
				}
				var timerAuto = null;
				function autoPlay(){
					timerAuto =	setInterval(function(){
							nextIndex = prevIndex;
							prevIndex++;
							if(prevIndex == lis.length){
								prevIndex = 0;
							}
							animate_JianBian(lis[nextIndex],-1);
							animate_JianBian(lis[prevIndex],1);
						},3500)
				}
				prev();
				next();
				autoPlay();
				//按钮左右显示 进入区域显示并停止动画,离开反之
				left_btn.onmouseover = function(){
					btn_l[0].style.opacity = 0.6;
					// console.log(btn_l[0].style.opacity);
					clearInterval(timerAuto);
				}
				left_btn.onmouseout = function(){
					btn_l[0].style.opacity = 0;
					autoPlay();
				}
				right_btn.onmouseover = function(){
					btn_r[0].style.opacity = 0.6;
					clearInterval(timerAuto);
				}
				right_btn.onmouseout = function(){
					btn_r[0].style.opacity = 0;
					autoPlay();
				}
			 }
		</script>

getStyle（）方法

	function getStyle(obj,name){
					if(window.getComputedStyle){  //判断浏览器
						return getComputedStyle(obj,null)[name];
					}
					else{
						return box.currentStyle[name];
					}
				}

下面为css代码

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			#outer{
				width: 590px;
				margin:70px auto;
		
			 }
			#banner{
				width: 590px;
				margin:70px auto;
				background-color: aqua;
				position: relative;
			}
			#imgList{
				 position: absolute;
			}
			.item{
				position: absolute;
				opacity: 0;
			}
			#imgList .item:first-of-type{
				opacity: 1;
			}
			#left_btn,#right_btn{
				width: 295px;
				height: 470px;
				float: left;
				line-height: 470px;
				/* background-color: #00FFFF; */
				opacity: 0.6;
			}
			/* opacity失效 */
			
			button{
				/* opacity: 0.4; */
			}
			.btn1{
				width: 50px;
				font-size: 30px;
				line-height: 50px;
				opacity: 0;
				border: 2px solid white;
			}
			.btn_l{
				border-radius: 0 10px 10px 0;
			}
			.btn_r{
				border-radius: 10px 0 0 10px;
			}
			#right_btn{
				text-align: right;
			}
		
		</style>

HTML5部分

	<div id="outer">
			<div id="banner">
				<ul id="imgList">
					<li class="item"><img src="images/1.jpg" alt=""></li>
					<li class="item"><img src="images/2.jpg" alt=""></li>
					<li class="item"><img src="images/3.jpg" ></li>
					<li class="item"><img src="images/4.jpg" ></li>
				</ul>
			</div>
			<div id="btn">
				<div id="left_btn"><button type="button" class="btn1 btn_l"> <</button> </div>
				<div id="right_btn">  <button type="button" class="btn1 btn_r">></button> </div> 
			</div>
		</div>