php广告图片循环播放 幻灯片效果

    <meta http-equiv="content-type" c charset="utf-8">
    <title>Image play</title>
    <style><span>        body{
            width:<span>430px;
            margin:<span>20px auto;
        }
        p.<span>now{
            display:<span>block;
            width:<span>400px;
            height:<span>200px;
            overflow:<span>hidden;
            border:1px solid <span>#<span>ccc;<span>        }
        li.<span>now{
            color:<span>#<span>ccc;<span>        }
        li{
            <span>list-style:<span>none;
            <span>float:<span>left;
            padding:0<span> 10px;
            margin-bottom:<span>5px;
            border:1px solid <span>#<span>ccc;            background:<span>#<span>eee;<span>        }
        <span>#<span>fd{<span>list-style:<span>none;
            <span>float:<span>left;
            padding:0<span> 10px;
            border:1px solid <span>#<span>ccc;            margin:0<span> auto;
            background:<span>#<span>eee;<span>        }
        img{
            width:<span>400px;
            height:<span>200px;
            padding:<span>1px;
            <span>/*<span>padding-top:18px;<span>*/<span>        }
    </style>


<div>
    <p>class="now"><img  src="/static/imghw/default1.png" data-src="./images/pic1.jpg" class="lazy" alt="php广告图片循环播放 幻灯片效果" ></p>
    <p><img  src="/static/imghw/default1.png" data-src="./images/pic2.jpg" class="lazy" alt="php广告图片循环播放 幻灯片效果" ></p>
    <p><img  src="/static/imghw/default1.png" data-src="./images/pic3.jpg" class="lazy" alt="php广告图片循环播放 幻灯片效果" ></p>
    <p><img  src="/static/imghw/default1.png" data-src="./images/pic4.jpg" class="lazy" alt="php广告图片循环播放 幻灯片效果" ></p>
    <ul>
        <li>class="now">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script>
    <span>var tags=$("fd").getElementsByTagName("li"); <span>//<span> 获取切换按钮节点<span>var cats=$("fd").getElementsByTagName("p"); <span>//<span> 获取切换内容节点<span>var<span>current; <span>//<span> 高置当前帧的变量宣容器<span>var timer=2000; <span>//<span> 设置2秒循环一次<span>function<span> disAll(){
        <span>for(<span>var i=0; i<tags.length; i++<span>){
            tags[i].className=""<span>;
            cats[i].className=""<span>;
            cats[i].style.display="none"<span>;
        }
    }
    <span>function<span> setNow(){
        <span>for(<span>var i=0; i<tags.length; i++<span>){
            <span>if(tags[i].className=="now"<span>){
                <span>current=<span>i;
            }
        }
    }
    <span>for(<span>var j=0; j<tags.length; j++<span>){
        tags[j].>function<span>(){
            clearInterval(h);
            disAll();
            this.className="now"<span>;
            setNow();
            cats[<span>current].style.display="block"<span>;
            cats[<span>current].className="now"<span>;
        }
        tags[j].>function<span>(){
            setNow();
            h=setInterval("goNext()", 3000<span>);
        }
    }
    <span>function<span> goNext(){
        setNow();
        <span>current+=1<span>;
        <span>if(<span>current>=parseInt(tags.<span>length)){
            <span>current=0<span>;
            disAll();
            cats[0].style.display="block"<span>;
            tags[0].className="now"<span>;
            cats[0].className="now"<span>;
        }<span>else<span>{
            disAll();
            cats[<span>current].style.display="block"<span>;
            cats[<span>current].className="now"<span>;
            tags[<span>current].className="now"<span>;
        }
    }
    <span>var h=setInterval("goNext()",<span> timer);
    <span>function<span> $(obj){
        <span>return document.<span>getElementById(obj);
    }
</script>

以上就介绍了php广告图片循环播放 幻灯片效果，包括了方面的内容，希望对PHP教程有兴趣的朋友有所帮助。