[读码时间]自动播放幻灯
说明：代码取自网络，注释为笔者学习时添加！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自动播放幻灯</title> <style> body,div,ul,li{/*内外边距为0*/ 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; width:490px; 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; var i = index = 0; //切换按钮 for (i = 0; i < aNum.length; i++) { aNum[i].index = i;//给每个按钮li元素添加索引属性 aNum[i].onmouseover = function () { show(this.index); //调用show函数，传入参数 } } oBox.onmouseover = function () { //注册mouseover事件 clearInterval(play);//清除计时器 }; oBox.onmouseout = function () {//注册mouseout事件 autoPlay();//调用自动播放函数 }; function autoPlay() { play = setInterval(function () { index++; index >= aImg.length && (index = 0); show(index); }, 2000); } autoPlay();//第一次调用 function show(a) { index = a; var alpha = 0; for (i = 0; i < aNum.length; i++) aNum[i].className = "";//清除所有编号li元素的类 aNum[index].className = "current";//给当前li元素添加类 clearInterval(timer); for (i = 0; i < aImg.length; i++) { aImg[i].style.opacity = 0;//设置透明度 aImg[i].style.filter = "alpha(pacity=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包裹2个ul列表--> <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>
