search

Home >Backend Development >PHP Tutorial >PHP advertising image loop playback slideshow effect

PHP advertising image loop playback slideshow effect

WBOY
WBOYOriginal
2016-07-29 09:15:341144browse

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="content-type" c charset="utf-8">
    <title>Image play</title>
    <style><span>        body{
            width</span>:<span>430px;
            margin</span>:<span>20px auto;
        }
        p</span>.<span>now{
            display</span>:<span>block;
            width</span>:<span>400px;
            height</span>:<span>200px;
            overflow</span>:<span>hidden;
            border</span>:1px solid <span>#</span><span>ccc;</span><span>        }
        li</span>.<span>now{
            color</span>:<span>#</span><span>ccc;</span><span>        }
        li{
            </span><span>list</span>-style:<span>none;
            </span><span>float</span>:<span>left;
            padding</span>:0<span> 10px;
            margin</span>-bottom:<span>5px;
            border</span>:1px solid <span>#</span><span>ccc;</span>            background:<span>#</span><span>eee;</span><span>        }
        </span><span>#</span><span>fd{</span><span>list</span>-style:<span>none;
            </span><span>float</span>:<span>left;
            padding</span>:0<span> 10px;
            border</span>:1px solid <span>#</span><span>ccc;</span>            margin:0<span> auto;
            background</span>:<span>#</span><span>eee;</span><span>        }
        img{
            width</span>:<span>400px;
            height</span>:<span>200px;
            padding</span>:<span>1px;
            </span><span>/*</span><span>padding-top:18px;</span><span>*/</span><span>        }
    </span></style>
</head>
<body>
<div>
    <p <span>class</span>="now"><img src="./images/pic1.jpg"></p>
    <p><img src="./images/pic2.jpg"></p>
    <p><img src="./images/pic3.jpg"></p>
    <p><img src="./images/pic4.jpg"></p>
    <ul>
        <li <span>class</span>="now">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script>
    <span>var</span> tags=$("fd").getElementsByTagName("li"); <span>//</span><span> 获取切换按钮节点</span><span>var</span> cats=$("fd").getElementsByTagName("p"); <span>//</span><span> 获取切换内容节点</span><span>var</span><span>current</span>; <span>//</span><span> 高置当前帧的变量宣容器</span><span>var</span> timer=2000; <span>//</span><span> 设置2秒循环一次</span><span>function</span><span> disAll(){
        </span><span>for</span>(<span>var</span> i=0; i<tags.length; i++<span>){
            tags[i]</span>.className=""<span>;
            cats[i]</span>.className=""<span>;
            cats[i]</span>.style.display="none"<span>;
        }
    }
    </span><span>function</span><span> setNow(){
        </span><span>for</span>(<span>var</span> i=0; i<tags.length; i++<span>){
            </span><span>if</span>(tags[i].className=="now"<span>){
                </span><span>current</span>=<span>i;
            }
        }
    }
    </span><span>for</span>(<span>var</span> j=0; j<tags.length; j++<span>){
        tags[j]</span>.>function</span><span>(){
            clearInterval(h);
            disAll();
            this</span>.className="now"<span>;
            setNow();
            cats[</span><span>current</span>].style.display="block"<span>;
            cats[</span><span>current</span>].className="now"<span>;
        }
        tags[j]</span>.>function</span><span>(){
            setNow();
            h</span>=setInterval("goNext()", 3000<span>);
        }
    }
    </span><span>function</span><span> goNext(){
        setNow();
        </span><span>current</span>+=1<span>;
        </span><span>if</span>(<span>current</span>>=parseInt(tags.<span>length)){
            </span><span>current</span>=0<span>;
            disAll();
            cats[</span>0].style.display="block"<span>;
            tags[</span>0].className="now"<span>;
            cats[</span>0].className="now"<span>;
        }</span><span>else</span><span>{
            disAll();
            cats[</span><span>current</span>].style.display="block"<span>;
            cats[</span><span>current</span>].className="now"<span>;
            tags[</span><span>current</span>].className="now"<span>;
        }
    }
    </span><span>var</span> h=setInterval("goNext()",<span> timer);
    </span><span>function</span><span> $(obj){
        </span><span>return</span> document.<span>getElementById(obj);
    }
</span></script>
</body>
</html>

The above introduces the PHP advertising image loop playback slideshow effect, including the content. I hope it will be helpful to friends who are interested in PHP tutorials.

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：nginx + ngx_lua installation testNext article：nginx + ngx_lua installation test

Related articles

See more