suchen

Heim  >  Artikel  >  Backend-Entwicklung  >  php广告图片循环播放 幻灯片效果，_PHP教程

php广告图片循环播放 幻灯片效果，_PHP教程

WBOY
WBOYOriginal
2016-07-13 16:53:51955Durchsuche

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

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" 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 id="fd">
    <p <span>class</span>="now"><img  src="./images/pic1.jpg" alt="php广告图片循环播放 幻灯片效果，_PHP教程" ></p>
    <p>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>.onmouseover=<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>.onmouseout=<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>

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/1053797.htmlTechArticlephp广告图片循环播放 幻灯片效果， !DOCTYPEhtmlhead meta http-equiv="content-type" content="text/html" charset="utf-8" titleImage play/title style body{ width : 430px;...
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：【PHP】解决html网页乱码问题，phphtml网页乱码_PHP教程Nächster Artikel：ThinkPHP函数详解：M方法，thinkphp函数详解_PHP教程

In Verbindung stehende Artikel

Mehr sehen