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

php广告图片循环播放 幻灯片效果 !DOCTYPEhtmlhead meta http-equiv="content-type" content="text/html" charset="utf-8" titleImage play/title style body{ width : 430px; margin : 20px auto; } p . now{ display : block; width : 400px; height : 200p

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

    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <title>Image play</title>
    <style><span style="color: #000000;">
        body{
            width:<span style="color: #000000;">430px;
            margin:<span style="color: #000000;">20px auto;
        }
        p.<span style="color: #000000;">now{
            display:<span style="color: #000000;">block;
            width:<span style="color: #000000;">400px;
            height:<span style="color: #000000;">200px;
            overflow:<span style="color: #000000;">hidden;
            border:1px solid <span style="color: #008000;">#<span style="color: #008000;">ccc;
<span style="color: #000000;">        }
        li.<span style="color: #000000;">now{
            color:<span style="color: #008000;">#<span style="color: #008000;">ccc;
<span style="color: #000000;">        }
        li{
            <span style="color: #0000ff;">list-style:<span style="color: #000000;">none;
            <span style="color: #0000ff;">float:<span style="color: #000000;">left;
            padding:0<span style="color: #000000;"> 10px;
            margin-bottom:<span style="color: #000000;">5px;
            border:1px solid <span style="color: #008000;">#<span style="color: #008000;">ccc;
            background:<span style="color: #008000;">#<span style="color: #008000;">eee;
<span style="color: #000000;">        }
        <span style="color: #008000;">#<span style="color: #008000;">fd{
            <span style="color: #0000ff;">list-style:<span style="color: #000000;">none;
            <span style="color: #0000ff;">float:<span style="color: #000000;">left;
            padding:0<span style="color: #000000;"> 10px;
            border:1px solid <span style="color: #008000;">#<span style="color: #008000;">ccc;
            margin:0<span style="color: #000000;"> auto;
            background:<span style="color: #008000;">#<span style="color: #008000;">eee;
<span style="color: #000000;">        }
        img{
            width:<span style="color: #000000;">400px;
            height:<span style="color: #000000;">200px;
            padding:<span style="color: #000000;">1px;
            <span style="color: #008000;">/*<span style="color: #008000;">padding-top:18px;<span style="color: #008000;">*/<span style="color: #000000;">
        }
    </style>


<div id="fd">
    <p style="color: #0000ff;">class="now"><img  src="./images/pic1.jpg" alt="php广告图片循环播放 幻灯片成效" ></p>
    <p style="display:none;"><img  src="./images/pic2.jpg" alt="php广告图片循环播放 幻灯片成效" ></p>
    <p style="display:none;"><img  src="./images/pic3.jpg" alt="php广告图片循环播放 幻灯片成效" ></p>
    <p style="display:none;"><img  src="./images/pic4.jpg" alt="php广告图片循环播放 幻灯片成效" ></p>
    <ul>
        <li style="color: #0000ff;">class="now">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script>
    <span style="color: #0000ff;">var tags=$("fd").getElementsByTagName("li"); <span style="color: #008000;">//<span style="color: #008000;"> 获取切换按钮节点
    <span style="color: #0000ff;">var cats=$("fd").getElementsByTagName("p"); <span style="color: #008000;">//<span style="color: #008000;"> 获取切换内容节点
    <span style="color: #0000ff;">var <span style="color: #008080;">current; <span style="color: #008000;">//<span style="color: #008000;"> 高置当前帧的变量宣容器
    <span style="color: #0000ff;">var timer=2000; <span style="color: #008000;">//<span style="color: #008000;"> 设置2秒循环一次
    <span style="color: #0000ff;">function<span style="color: #000000;"> disAll(){
        <span style="color: #0000ff;">for(<span style="color: #0000ff;">var i=0; i<tags.length; i++<span style="color: #000000;">){
            tags[i].className=""<span style="color: #000000;">;
            cats[i].className=""<span style="color: #000000;">;
            cats[i].style.display="none"<span style="color: #000000;">;
        }
    }
    <span style="color: #0000ff;">function<span style="color: #000000;"> setNow(){
        <span style="color: #0000ff;">for(<span style="color: #0000ff;">var i=0; i<tags.length; i++<span style="color: #000000;">){
            <span style="color: #0000ff;">if(tags[i].className=="now"<span style="color: #000000;">){
                <span style="color: #008080;">current=<span style="color: #000000;">i;
            }
        }
    }
    <span style="color: #0000ff;">for(<span style="color: #0000ff;">var j=0; j<tags.length; j++<span style="color: #000000;">){
        tags[j].onmouseover=<span style="color: #0000ff;">function<span style="color: #000000;">(){
            clearInterval(h);
            disAll();
            this.className="now"<span style="color: #000000;">;
            setNow();
            cats[<span style="color: #008080;">current].style.display="block"<span style="color: #000000;">;
            cats[<span style="color: #008080;">current].className="now"<span style="color: #000000;">;
        }
        tags[j].onmouseout=<span style="color: #0000ff;">function<span style="color: #000000;">(){
            setNow();
            h=setInterval("goNext()", 3000<span style="color: #000000;">);
        }
    }
    <span style="color: #0000ff;">function<span style="color: #000000;"> goNext(){
        setNow();
        <span style="color: #008080;">current+=1<span style="color: #000000;">;
        <span style="color: #0000ff;">if(<span style="color: #008080;">current>=parseInt(tags.<span style="color: #000000;">length)){
            <span style="color: #008080;">current=0<span style="color: #000000;">;
            disAll();
            ca【本文来自鸿网互联 (http://www.68idc.cn)】ts[0].style.display="block"<span style="color: #000000;">;
            tags[0].className="now"<span style="color: #000000;">;
            cats[0].className="now"<span style="color: #000000;">;
        }<span style="color: #0000ff;">else<span style="color: #000000;">{
            disAll();
            cats[<span style="color: #008080;">current].style.display="block"<span style="color: #000000;">;
            cats[<span style="color: #008080;">current].className="now"<span style="color: #000000;">;
            tags[<span style="color: #008080;">current].className="now"<span style="color: #000000;">;
        }
    }
    <span style="color: #0000ff;">var h=setInterval("goNext()",<span style="color: #000000;"> timer);
    <span style="color: #0000ff;">function<span style="color: #000000;"> $(obj){
        <span style="color: #0000ff;">return document.<span style="color: #000000;">getElementById(obj);
    }
</script>