Heim > Artikel > Backend-Entwicklung > Verwenden Sie PHP, um die Schleifenwiedergabe von Werbebildern zu implementieren

Verwenden Sie PHP, um die Schleifenwiedergabe von Werbebildern zu implementieren

一个新手Original: 2017-09-12 10:10:401770Durchsuche

<!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>
<p 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>
</p>
<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>

Das obige ist der detaillierte Inhalt vonVerwenden Sie PHP, um die Schleifenwiedergabe von Werbebildern zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：So verstehen Sie die Sitzungssteuerung in PHPNächster Artikel：So verstehen Sie die Sitzungssteuerung in PHP

In Verbindung stehende Artikel

Mehr sehen