php广告图片循环播放幻灯片效果-php教程-PHP中文网

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

php中文网

发布： 2016-07-29 09:15:34

原创

1320人浏览过

<!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" alt="php广告图片循环播放 幻灯片效果" ></p>
    <p><img  src="./images/pic2.jpg" alt="php广告图片循环播放 幻灯片效果" ></p>
    <p><img  src="./images/pic3.jpg" alt="php广告图片循环播放 幻灯片效果" ></p>
    <p><img  src="./images/pic4.jpg" alt="php广告图片循环播放 幻灯片效果" ></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1456">
                            <img src="https://img.php.cn/upload/ai_manual/001/431/639/68b6cba49740f148.png" alt="改图鸭AI图片生成">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1456">改图鸭AI图片生成</a>
                            <p>改图鸭AI图片生成</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="改图鸭AI图片生成">
                                <span>30</span>
                            </div>
                        </div>
                        <a href="/ai/1456" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="改图鸭AI图片生成">
                        </a>
                    </div>
                
    <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>

登录后复制