Home > Article > Backend Development > Using php to implement loop playback of advertising images

Using php to implement loop playback of advertising images

一个新手Original: 2017-09-12 10:10:401783browse

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to understand session control in PHPNext article：How to understand session control in PHP

See more

Using php to implement loop playback of advertising images

Related articles