Home >Web Front-end >JS Tutorial >Native js implements carousel chart

Native js implements carousel chart

小云云Original: 2018-03-22 17:39:572368browse

This article mainly shares with you the implementation of carousel images in native js, mainly in the form of code. I hope it can help everyone.

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

Related recommendations:

Native js to implement automatic carousel images

Two ways of js to implement carousel images

js realizes the effect of finger sliding carousel on mobile terminal

The above is the detailed content of Native js implements carousel chart. For more information, please follow other related articles on the PHP Chinese website!

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：Summary of js and jquery knowledge pointsNext article：Summary of js and jquery knowledge points

See more

Native js implements carousel chart

Related articles