php广告图片循环播放幻灯片成效-php手册-PHP中文网

php广告图片循环播放幻灯片成效
php中文网
发布： 2016-06-06 19:42:53
原创
1601人浏览过
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广告图片循环播放幻灯片效果
<!DOCTYPE>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <title>Image play</title>
    <style><span style="color: #000000;">
        body{
            width</span>:<span style="color: #000000;">430px;
            margin</span>:<span style="color: #000000;">20px auto;
        }
        p</span>.<span style="color: #000000;">now{
            display</span>:<span style="color: #000000;">block;
            width</span>:<span style="color: #000000;">400px;
            height</span>:<span style="color: #000000;">200px;
            overflow</span>:<span style="color: #000000;">hidden;
            border</span>:1px solid <span style="color: #008000;">#</span><span style="color: #008000;">ccc;</span>
<span style="color: #000000;">        }
        li</span>.<span style="color: #000000;">now{
            color</span>:<span style="color: #008000;">#</span><span style="color: #008000;">ccc;</span>
<span style="color: #000000;">        }
        li{
            </span><span style="color: #0000ff;">list</span>-style:<span style="color: #000000;">none;
            </span><span style="color: #0000ff;">float</span>:<span style="color: #000000;">left;
            padding</span>:0<span style="color: #000000;"> 10px;
            margin</span>-bottom:<span style="color: #000000;">5px;
            border</span>:1px solid <span style="color: #008000;">#</span><span style="color: #008000;">ccc;</span>
            background:<span style="color: #008000;">#</span><span style="color: #008000;">eee;</span>
<span style="color: #000000;">        }
        </span><span style="color: #008000;">#</span><span style="color: #008000;">fd{</span>
            <span style="color: #0000ff;">list</span>-style:<span style="color: #000000;">none;
            </span><span style="color: #0000ff;">float</span>:<span style="color: #000000;">left;
            padding</span>:0<span style="color: #000000;"> 10px;
            border</span>:1px solid <span style="color: #008000;">#</span><span style="color: #008000;">ccc;</span>
            margin:0<span style="color: #000000;"> auto;
            background</span>:<span style="color: #008000;">#</span><span style="color: #008000;">eee;</span>
<span style="color: #000000;">        }
        img{
            width</span>:<span style="color: #000000;">400px;
            height</span>:<span style="color: #000000;">200px;
            padding</span>:<span style="color: #000000;">1px;
            </span><span style="color: #008000;">/*</span><span style="color: #008000;">padding-top:18px;</span><span style="color: #008000;">*/</span><span style="color: #000000;">
        }
    </span></style>
</head>
<body>
<div id="fd">
    <p <span style="color: #0000ff;">class</span>="now">@@##@@</p>
    <p style="display:none;">@@##@@</p>
    <p style="display:none;">@@##@@</p>
    <p style="display:none;">@@##@@</p>
    <ul>
        <li <span style="color: #0000ff;">class</span>="now">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script>
    <span style="color: #0000ff;">var</span> tags=$("fd").getElementsByTagName("li"); <span style="color: #008000;">//</span><span style="color: #008000;"> 获取切换按钮节点</span>
    <span style="color: #0000ff;">var</span> cats=$("fd").getElementsByTagName("p"); <span style="color: #008000;">//</span><span style="color: #008000;"> 获取切换内容节点</span>
    <span style="color: #0000ff;">var</span> <span style="color: #008080;">current</span>; <span style="color: #008000;">//</span><span style="color: #008000;"> 高置当前帧的变量宣容器</span>
    <span style="color: #0000ff;">var</span> timer=2000; <span style="color: #008000;">//</span><span style="color: #008000;"> 设置2秒循环一次</span>
    <span style="color: #0000ff;">function</span><span style="color: #000000;"> disAll(){
        </span><span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i=0; i<tags.length; i++<span style="color: #000000;">){
            tags[i]</span>.className=""<span style="color: #000000;">;
            cats[i]</span>.className=""<span style="color: #000000;">;
            cats[i]</span>.style.display="none"<span style="color: #000000;">;
        }
    }
    </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> setNow(){
        </span><span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i=0; i<tags.length; i++<span style="color: #000000;">){
            </span><span style="color: #0000ff;">if</span>(tags[i].className=="now"<span style="color: #000000;">){
                </span><span style="color: #008080;">current</span>=<span style="color: #000000;">i;
            }
        }
    }
    </span><span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> j=0; j<tags.length; j++<span style="color: #000000;">){
        tags[j]</span>.onmouseover=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            clearInterval(h);
            disAll();
            this</span>.className="now"<span style="color: #000000;">;
            setNow();
            cats[</span><span style="color: #008080;">current</span>].style.display="block"<span style="color: #000000;">;
            cats[</span><span style="color: #008080;">current</span>].className="now"<span style="color: #000000;">;
        }
        tags[j]</span>.onmouseout=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            setNow();
            h</span>=setInterval("goNext()", 3000<span style="color: #000000;">);
        }
    }
    </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> goNext(){
        setNow();
        </span><span style="color: #008080;">current</span>+=1<span style="color: #000000;">;
        </span><span style="color: #0000ff;">if</span>(<span style="color: #008080;">current</span>>=parseInt(tags.<span style="color: #000000;">length)){
            </span><span style="color: #008080;">current</span>=0<span style="color: #000000;">;
            disAll();
            ca【本文来自鸿网互联 (http://www.68idc.cn)】ts[</span>0].style.display="block"<span style="color: #000000;">;
            tags[</span>0].className="now"<span style="color: #000000;">;
            cats[</span>0].className="now"<span style="color: #000000;">;
        }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
            disAll();
            cats[</span><span style="color: #008080;">current</span>].style.display="block"<span style="color: #000000;">;
            cats[</span><span style="color: #008080;">current</span>].className="now"<span style="color: #000000;">;
            tags[</span><span style="color: #008080;">current</span>].className="now"<span style="color: #000000;">;
        }
    }
    </span><span style="color: #0000ff;">var</span> h=setInterval("goNext()",<span style="color: #000000;"> timer);
    </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> $(obj){
        </span><span style="color: #0000ff;">return</span> document.<span style="color: #000000;">getElementById(obj);
    }
</span></script>
</body>
</html>
登录后复制
php广告图片循环播放幻灯片成效