php广告图片循环播放幻灯片效果

<!DOCTYPE><html><head>    <meta http-equiv="content-type" content="text/html" charset="utf-8">    <title>Image play</title>    <style>        body{            width:430px;            margin:20px auto;        }        p.now{            display:block;            width:400px;            height:200px;            overflow:hidden;            border:1px solid #ccc;        }        li.now{            color:#ccc;        }        li{            list-style:none;            float:left;            padding:0 10px;            margin-bottom:5px;            border:1px solid #ccc;            background:#eee;        }        #fd{            list-style:none;            float:left;            padding:0 10px;            border:1px solid #ccc;            margin:0 auto;            background:#eee;        }        img{            width:400px;            height:200px;            padding:1px;            /*padding-top:18px;*/        }    </style></head><body><div id="fd">    <p class="now"><img src="./images/pic1.jpg"></p>    <p style="display:none;"><img src="./images/pic2.jpg"></p>    <p style="display:none;"><img src="./images/pic3.jpg"></p>    <p style="display:none;"><img src="./images/pic4.jpg"></p>    <ul>        <li class="now">1</li>        <li>2</li>        <li>3</li>        <li>4</li>    </ul></div><script>    var tags=$("fd").getElementsByTagName("li"); // 获取切换按钮节点    var cats=$("fd").getElementsByTagName("p"); // 获取切换内容节点    var current; // 高置当前帧的变量宣容器    var timer=2000; // 设置2秒循环一次    function disAll(){        for(var i=0; i<tags.length; i++){            tags[i].className="";            cats[i].className="";            cats[i].style.display="none";        }    }    function setNow(){        for(var i=0; i<tags.length; i++){            if(tags[i].className=="now"){                current=i;            }        }    }    for(var j=0; j<tags.length; j++){        tags[j].onmouseover=function(){            clearInterval(h);            disAll();            this.className="now";            setNow();            cats[current].style.display="block";            cats[current].className="now";        }        tags[j].onmouseout=function(){            setNow();            h=setInterval("goNext()", 3000);        }    }    function goNext(){        setNow();        current+=1;        if(current>=parseInt(tags.length)){            current=0;            disAll();            cats[0].style.display="block";            tags[0].className="now";            cats[0].className="now";        }else{            disAll();            cats[current].style.display="block";            cats[current].className="now";            tags[current].className="now";        }    }    var h=setInterval("goNext()", timer);    function $(obj){        return document.getElementById(obj);    }</script></body></html>
爱程序网

php广告图片循环播放 幻灯片效果

Tags：php广告图片循环播放 幻灯

Tags：php广告图片循环播放幻灯
