Using php to implement loop playback of advertising images-PHP Tutorial-php.cn

Using php to implement loop playback of advertising images

一个新手

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

Original

1792 people have browsed it

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

Copy after login

The above is the detailed content of Using php to implement loop playback of advertising images. For more information, please follow other related articles on the PHP Chinese website!