1. 程式人生 > >html,幻燈片自動切換程式碼

html,幻燈片自動切換程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; 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:322px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;}
            #box .list{position:relative;width:320px;height:240px;overflow:hidden;border:1px solid #ccc;}
            #box .list li{position:absolute;top:0;left:0;width:320px;height:240px;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 type="text/javascript"> 
        window.onload = function() {
            var oBox = document.getElementById("box");
            var aUl = document.getElementsByTagName("ul");
            var aImg = aUl[0].getElementsByTagName("li");
            var aNum = aUl[1].getElementsByTagName("li");
            var timer = play = null;
            var i = index = 0;
            var bOrder = true;
            //切換按鈕
            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() {
                    //判斷播放順序
                    bOrder ? index++:index--;
                    //正序
                    index >= aImg.length && (index = aImg.length - 2, bOrder = false);
                    //倒序
                    index <= 0 && (index = 0, bOrder = true);
                    //呼叫函式
                    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"><img src="/images/m06.jpg" width="320" height="240" /></li> 
    <li><img src="./img/1.jpg" width="320" height="240" /></li> 
    <li><img src="./img/2.jpg" width="320" height="240" /></li> 
    <li><img src="./img/3.jpg" width="320" height="240" /></li> 
    <li><img src="./img/1.jpg" width="320" height="240" /></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>