suchen

Heim >Web-Frontend >js-Tutorial >Native js implementiert Karusselldiagramm

Native js implementiert Karusselldiagramm

小云云
小云云Original
2018-03-22 17:39:572365Durchsuche

Dieser Artikel teilt Ihnen hauptsächlich die Implementierung von Karussellbildern in nativem JS mit, hauptsächlich in Form von Code. Ich hoffe, dass er allen helfen kann. 

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">        /*重置样式*/        *{margin: 0;padding: 0; list-style: none;}        /*wrap的轮播图和切换按钮样式*/        .wrap{height: 410px;width: 990px;margin: 100px auto; overflow:hidden;position: relative;}
        .wrap ul{position: absolute;}
        .wrap ul li{height: 410px;}
        .wrap ol{position: absolute;right: 10px;bottom: 10px;}
        .wrap ol li{height: 20px;width: 20px;  background-color:#fff;border: 1px solid #eee; margin-left: 10px;float:left; line-height: 20px; text-align: center;}
        .wrap ol li.active{background-color: #330099; color: #fff; border: 2px solid green;}
    </style>
</head>
<body><!-- wrap包裹录播的图片以及可点击跳转的按钮 --><p class="wrap" id="wrap">
    <ul id="pic">
        <li><img src="picture/focus_1.png" alt=""></li>
        <li><img src="picture/focus_2.png" alt=""></li>
        <li><img src="picture/focus_3.png" alt=""></li>
        <li><img src="picture/focus_4.png" alt=""></li>
    </ul>
    <ol id="list">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</p>
<script type="text/javascript">    window.onload=function(){        var wrap=document.getElementById(&#39;wrap&#39;),
            pic=document.getElementById(&#39;pic&#39;),
            list=document.getElementById(&#39;list&#39;).getElementsByTagName(&#39;li&#39;),
            index=0,
            timer=null;        // 定义并调用自动播放函数        if(timer){            clearInterval(timer);
            timer=null;
        }
        timer=setInterval(autoplay,2000);        // 定义图片切换函数        function autoplay(){
            index++;            if(index>=list.length){
                index=0;
            }            changeoptions(index);
        }        // 鼠标划过整个容器时停止自动播放        wrap.onmouseover=function(){            clearInterval(timer);
        }        // 鼠标离开整个容器时继续播放至下一张        wrap.onmouseout=function(){
            timer=setInterval(autoplay,2000);
        }        // 遍历所有数字导航实现划过切换至对应的图片        for(var i=0;i<list.length;i++){
            list[i].id=i;
            list[i].onmouseover=function(){                clearInterval(timer);                changeoptions(this.id);
            }
        }        function changeoptions(curindex){            for(var j=0;j<list.length;j++){
                list[j].className=&#39;&#39;;
                pic.style.top=0;
            }
            list[curindex].className=&#39;active&#39;;
            pic.style.top=-curindex*410+&#39;px&#39;;
            index=curindex;
        }
    }
</script>
</body>
</html>

Verwandte Empfehlungen:

Native js zur Implementierung automatischer Karussellbilder

Zwei Möglichkeiten von js zur Implementierung von Karussellbildern

js implementiert den Finger-Slide-Karusselleffekt auf mobilen Endgeräten

Das obige ist der detaillierte Inhalt vonNative js implementiert Karusselldiagramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Zusammenfassung der Wissenspunkte zu js und jqueryNächster Artikel：Zusammenfassung der Wissenspunkte zu js und jquery

In Verbindung stehende Artikel

Mehr sehen