用php实现广告图片循环播放

一个新手

发布： 2017-09-12 10:10:40

原创

2008人浏览过

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

登录后复制