Verwenden Sie PHP, um die Schleifenwiedergabe von Werbebildern zu implementieren-PHP-Tutorial-php.cn

Verwenden Sie PHP, um die Schleifenwiedergabe von Werbebildern zu implementieren

一个新手

Freigeben： 2023-03-15 22:14:01

Original

1816 Leute haben es durchsucht

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

Nach dem Login kopieren

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!