JavaScript幻灯片大图淡出淡现切换特效

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 　

setinterval()用法 -- setInterval(code,millisec[,"lang"]) 后面就两个参数code是你的js代码，millisec为时间间隔，以毫秒计。

html:

		<div id="flash">
			<!-- 左右2个按钮 -->
			<div id="prev"></div>
			<div id="next"></div>
			<!-- 中间图片 -->
			<ul id="play">
				<!-- li*5>img[src="images/$.jpg" alt=""] -->
				<li style="display: block;"><img src="images/1.jpg" alt=""></li>
				<li><img src="images/2.jpg" alt=""></li>
				<li><img src="images/3.jpg" alt=""></li>
				<li><img src="images/4.jpg" alt=""></li>
				<li><img src="images/5.jpg" alt=""></li>
			</ul>
			<!-- 下面小点 -->
			<ul id="button">
				<li>
					<div style="background: #a10000;"></div>
				</li>
				<li>
					<div></div>
				</li>
				<li>
					<div></div>
				</li>
				<li>
					<div></div>
				</li>
				<li>
					<div></div>
				</li>
			</ul>
		</div>

css:

		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul,li{
				list-style-type: none;
			}
			#flash{
				width: 1200px;
				height: 535px;
				margin: 50px auto;
				position: relative;
			}
			#flash #play{
				width: 1200px;
				height: 535px;
				position: absolute;
				top: 0;
				left: 0;
			}
			#flash #play li{
				display: none;
				position: absolute;
				top: 0;
				left: 0;
			}
			#flash #play li img{
				float: left;
			}
			#button{
				list-style-type: none;
				position: absolute;
				left: 470px;
				bottom: 20px;
			}
			#button li{
				float: left;
				margin-left: 10px;
			}
			#button li div{
				width: 12px;
				height: 12px;
				background: #ddd;
				border-radius: 6px;
				cursor: pointer;
			}
			#prev{
				width: 40px;
				height: 63px;
				background-image: url('./images/beijing.png');
				background-position: 0 0;
				position: absolute;
				left: 10px;
				top: 205px;
				z-index: 1000;
			}
			#next{
				width: 40px;
				height: 63px;
				background-image: url('./images/beijing.png');
				background-position: -40px 0;
				position: absolute;
				right: 10px;
				top: 205px;
				z-index: 1000;
			}
			#prev:hover{
				background-image: url('./images/beijing.png');
				background-position: 0 -62px;
			}
			#next:hover{
				background-image: url('./images/beijing.png');
				background-position: -40px -62px;
			}
		</style>

javascript:

		<script>
			window.onload = function(){
				// 抓取元素
				// 抓取最外层的div#flash
				let oFlash = document.getElementById('flash');
				// 抓取ul#play
				let oPlay = document.getElementById('play');
				// 抓取ul#play中的所有的li
				let aLi = oPlay.getElementsByTagName('li');
				// 抓取ul#button
				let oButton = document.getElementById('button');
				// 抓取ul#button中所有的div
				let aDiv = oButton.getElementsByTagName('div');
				// 抓取左右2个按钮
				let oPrev = document.getElementById('prev');
				let oNext = document.getElementById('next');
				
				// 初始化
				let now = 0;
				let timer1 = null;
				
				// 对下面小点遍历
				for(let i=0;i<aDiv.length;i++){
					aDiv[i].index = i;
					aDiv[i].onmouseover = function(){
						if(now == this.index){
							return false;
						}
						now = this.index;
						tab();
					}
				}
				
				function tab(){
					now++;
					if(now==5){
						now = 0;
					}
					//遍历包裹图片的li，让所有的li隐藏
					for(let i=0; i<aLi.length; i++){
						aLi[i].style.display = 'none';
					}
					// 遍历下面的的小点div，让所有的div背景色都是灰色
					for(let i=0; i<aDiv.length; i++){
						aDiv[i].style.background = '#ddd';
					}
					console.log(now)
					// 当前的小点div高亮显示
					aDiv[now].style.background = '#a10000';
					// 当前的li显示
					aLi[now].style.display = 'block';
					// 当前li透明度设置为0
					aLi[now].style.opacity = 0;
					aLi[now].style.filter = "alpha(opacity=0)";
					// 当前li 调用执行渐变函数
					gradual(aLi[now]);
					
				}
				
				function tab1(){
					//遍历包裹图片的li，让所有的li隐藏
					for(let i=0; i<aLi.length; i++){
						aLi[i].style.display = 'none';
					}
					// 遍历下面的的小点div，让所有的div背景色都是灰色
					for(let i=0; i<aDiv.length; i++){
						aDiv[i].style.background = '#ddd';
					}
					console.log(now)
					// 当前的小点div高亮显示
					aDiv[now].style.background = '#a10000';
					// 当前的li显示
					aLi[now].style.display = 'block';
					// 当前li透明度设置为0
					aLi[now].style.opacity = 0;
					aLi[now].style.filter = "alpha(opacity=0)";
					// 当前li 调用执行渐变函数
					gradual(aLi[now]);
					
				}
				
				// 渐变
				//设置当前li的渐变效果
				function gradual(obj){
					var alpha = 0;
					clearInterval(timer);
					var timer = setInterval(function(){
						alpha++;
						obj.style.opacity = alpha/100;
						obj.style.filter = "alpha(opacity="+alpha+")";
						if(alpha == 100){
							clearInterval(timer);
						}
					},10);
				}
				
				// 自动播放--设置间隔定时器
				timer1 = setInterval(tab,3000);
				
				
				// 鼠标移入 最外层的div#flash，清除定时器
				oFlash.onmouseover = function(){
					clearInterval(timer1);
				}
				// 鼠标移出 最外层的div#flash，清除定时器
				oFlash.onmouseout = function(){
					timer1 = setInterval(tab,2000);
				}
				
				// 点击左侧oPrev按钮
				oPrev.onclick = function(){
					now--;
					console.log(now)
					if(now==-1){
						// 把索引的最大值赋值给now
						now = aDiv.length - 1;
					}
					// 调用执行tab()函数
					tab1();
				}
				// 点击右侧oNext按钮
				oNext.onclick = function(){
					now++;
					if(now==aDiv.length){
						now = 0;
					}
					// 调用执行tab()函数
					tab1();
				}
				
				
			}
		</script>