Maison >interface Web >js tutoriel >Native js implémente un graphique carrousel

Native js implémente un graphique carrousel

小云云original: 2018-03-22 17:39:572416parcourir

Cet article partage principalement avec vous l'implémentation des images carrousel en js natif, principalement sous forme de code j'espère qu'il pourra aider tout le monde.

<!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>

Recommandations associées :

Js natif pour implémenter des images de carrousel automatiques

Deux façons de js pour implémenter des images de carrousel

js implémente l'effet carrousel coulissant des doigts sur le terminal mobile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé des points de connaissances js et jqueryArticle suivant：Résumé des points de connaissances js et jquery

Articles Liés

Voir plus