suchen

Heim >Backend-Entwicklung >PHP-Tutorial >PHP-Werbebildschleifen-Wiedergabe-Diashow-Effekt

PHP-Werbebildschleifen-Wiedergabe-Diashow-Effekt

WBOY
WBOYOriginal
2016-07-29 09:15:341138Durchsuche

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

Das Obige stellt den PHP-Werbebildschleifen-Wiedergabe-Diashow-Effekt vor, einschließlich des Inhalts. Ich hoffe, er wird für Freunde hilfreich sein, die sich für PHP-Tutorials interessieren.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Nginx ngx_lua InstallationstestNächster Artikel：Nginx ngx_lua Installationstest

In Verbindung stehende Artikel

Mehr sehen