[读码时间] 自动改变方向幻灯片效果
说明：代码取自网络，注释为笔者学习时添加。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自动改变方向幻灯片效果</title> <style> body,div,ul,li{ margin:0; padding:0; } ul{ list-style-type:none; } body{ background:#000;/*黑色*/ text-align:center; font:12px/20px Arial; } #box{ position:relative;/*相对*/ width:492px; height:172px; background:#fff;/*白色*/ border-radius:5px;/*圆角*/ border:8px solid #fff;/*白色粗边框*/ margin:10px auto;/*左右置中*/ } #box .list{ position:relative; width:490px; height:170px; overflow:hidden; border:1px solid #ccc;/*灰色*/ } #box .list li{ position:absolute;/*绝对*/ top:0; left:0; height:170px; opacity:0;/*透明度*/ filter:alpha(opacity=0); } #box .list li.current{ opacity:1; filter:alpha(opacity=100); } #box .count{ position:absolute;/*绝对*/ right:0;/*靠右对齐*/ bottom:5px; } #box .count li{ color:#fff;/*白色*/ float:left;/*左浮动*/ width:20px; height:20px; cursor:pointer;/*手形*/ margin-right:5px; overflow:hidden; background:#f90;/*桔黄色*/ opacity:0.7;/*透明度*/ filter:alpha(opacity=70); border-radius:20px;/*圆角弧度*/ } #box .count li.current{ color:#fff;/*白色*/ opacity:1;/*透明度*/ filter:alpha(opacity=100); font-weight:700;/*粗*/ background:#f60;/*桔红色*/ } #tmp{ width:100px; height:100px; background:red; position:absolute;/*绝对*/ } </style> <script> window.onload = function () { var oBox = document.getElementById("box");//获取div引用 var aUl = document.getElementsByTagName("ul");//获取ul列表引用 var aImg = aUl[0].getElementsByTagName("li");//获取列表1中所有li引用 var aNum = aUl[1].getElementsByTagName("li");//获取列表2中所有 li引用,这些是用于在右下角显示当前图片序号 var timer = play = null;//声明计时器id var i = index = 0;//声明索引并初始化 var bOrder = true;//flag,风向标，旗语，布尔值，判断顺序，默认为真，由小到大递增 for (i = 0; i < aNum.length; i++) { aNum[i].index = i;//给序号添加index索引值 aNum[i].onmouseover = function () {//注册mouseover事件，切换按钮 show(this.index);//给show函数传递值 } } oBox.onmouseover = function () {//鼠标移入关闭定时器 clearInterval(play);//play为定时器id，传给clearInterval则可以清除定时器 }; oBox.onmouseout = function () {//鼠标移出自动播放 autoPlay(); }; function autoPlay() { play = setInterval(function () { bOrder ? index++ : index--;//bOrder即所谓的flag（能翻译成风向标么？），旗语，默认为真，判断播放顺序，为真则递增，为假则递减 index >= aImg.length && (index = aImg.length - 2, bOrder = false);//index增加到超过图片总数量，赋值index为倒数第2张图片，flag标记bOrder值为假 index <= 0 && (index = 0, bOrder = true);//index小于等于0，赋值index为第1张图片，flag标记bOrder设为真 show(index);//调用show，显示当前图片 }, 2000);//2秒执行一次 } autoPlay();//首次调用 function show(a) { index = a; var alpha = 0; for (i = 0; i < aNum.length; i++) aNum[i].className = "";//清除所有序号的类 aNum[index].className = "current";//添加类 clearInterval(timer);//清除间歇调用 for (i = 0; i < aImg.length; i++) {//设置所有图片的透明度为不可见 aImg[i].style.opacity = 0; aImg[i].style.filter = "alpha(opacity=0)"; } timer = setInterval(function () { alpha += 2; alpha > 100 && (alpha = 100); aImg[index].style.opacity = alpha / 100; aImg[index].style.filter = "alpha(opacity= " + alpha + ")"; alpha == 100 && clearInterval(timer); }, 20); } }; </script> </head> <body> <div id="box"> <ul class="list"> <li class="current"><img src="img/01.jpg" width="490" height="170" /></li> <li><img src="img/02.jpg" width="490" height="170" /></li> <li><img src="img/03.jpg" width="490" height="170" /></li> <li><img src="img/04.jpg" width="490" height="170" /></li> <li><img src="img/05.jpg" width="490" height="170" /></li> </ul> <ul class="count"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>
