- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!-- saved from url=(0039)http://www.fgm.cc/learn/lesson4/02.html -->
- <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
- <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;width:490px;height:170px;opacity:0;filter:alpha(opacity=0);}
- #box .list li img{width: 100%;height: 100%;}
- #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;}
- /*所有width改为100%可兼容移动端*/
- </style>
- <script type="text/javascript">
- window.onload = function (){
- var oBox = document.getElementById('box');
- var aUl = oBox.getElementsByTagName('ul');
- var aImg = aUl[0].getElementsByTagName("li");
- var aNum = aUl[1].getElementsByTagName("li");
- var timer = play = null;
- var i = index = 0;
- //切换按钮
- for (i = 0; i < aNum.length; i++){
- aNum[i].index = i;
- aNum[i].onmouseover = function(){
- show(this.index)
- }
- }
- //鼠标划过关闭定时器
- oBox.onmouseover = function (){
- clearInterval(play)
- };
- //鼠标离开启动自动播放
- oBox.onmouseout = function ()
- {
- 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 = "";
- 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" style="opacity: 1;"><img src="./img/01.jpg"></li>
- <li><img src="./img/02.jpg"></li>
- <li><img src="./img/03.jpg"></li>
- <li><img src="./img/04.jpg"></li>
- <li><img src="./img/05.jpg"></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>