Native js writing carousel example tutorial

In this article, we will share with you an example tutorial on writing a carousel in native js. Let's learn it together with html and css code.

<style type="text/css">
            #box{
                width:1140px;
                height: 380px;
                border: 1px solid #000;
                margin: 0 auto;
                position: relative;
            }
            img{
                position: absolute;
                top: 0;
                left: 0;
            }
            a{
                display: block;
                width:60px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                background: #FFFAE8;
                display: none;
                position: absolute;
            }
            #prev{
                top:50%;
                left: 10px;
            }
            #next{
                top:50%;
                right: 10px;
            }
            p{
                width:30px;
                height: 30px;
                background-color: #ccc;
                border-radius: 50%;
                float: left;
                margin:0 10px;
                border:2px solid #fff;
                margin:10px;
            }
            .spot{
                width:272px;
                height:40px;
                position: absolute;
                bottom:10px;
                left: 40%;
                
            }
            .on{
                background: red;
            }
        </style>

html code

<p id="box">
            <img src="img/j_banner1.jpg" alt="" />
            <img src="img/j_banner2.jpg" alt="" />
            <img src="img/j_banner3.jpg" alt="" />
            <img src="img/j_banner4.jpg" alt="" />
            <img src="img/j_banner5.jpg" alt="" />
            <p class="spot">
                <p class="on"></p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
            </p>
            <a id="prev" href="javascript:;">前一张</a>
            <a id="next" href="javascript:;">后一张</a>
        </p>

javascript code

<script type="text/javascript">
    
        var pic = document.getElementsByTagName("img");
        var btn1 = document.getElementById("prev");
        var btn2 = document.getElementById("next");
        var _box = document.getElementById("box");
        var _p = document.getElementsByTagName("p");
        var num = 0;
        var timer = null;
        for(var j = 1;j < pic.length;j++){
                setOpacity(pic[j],0);
            }
        
        //透明度封装
        function setOpacity(elem,level){
            if(elem.filters){
                elem.style.filter = "alpha(opacity=" + level + ")";
            }else{
                elem.style.opacity = level / 100;
            }
        }
        //淡如效果
        function fadeIn(elem){
            setOpacity(elem,0);
            for(var i = 0;i <= 100;i++){
                (function(pos){
                    setTimeout(function(){
                        setOpacity(elem,pos)
                    },10 * pos);
                })(i);
            }
        }
        
        //淡出效果
        function fadeOut(elem){
            for(var i = 0;i <= 100;i++){
                (function(pos){
                    setTimeout(function(){
                        setOpacity(elem,pos);
                    },10 *(100 - pos));
                })(i);
            }
        }
        
        function converPrev(){
            if(num == 0){
                fadeOut(pic[num]);
                num = 4;
                fadeIn(pic[num]);
            }else{
                fadeIn(pic[num-1]);
                fadeOut(pic[num]);
                num--;
            }
            showDot(num);
        }
        
        function converNext(){
            if(num == 4){
                fadeOut(pic[num]);
                num = 0;
                fadeIn(pic[num]);
            }else{
                fadeIn(pic[num+1]);
                fadeOut(pic[num]);
                num++;
            }
            showDot(num);
        }
        
        //小圆点背景色
        function showDot(n){
            for(var k = 0;k < _p.length;k++){
                _p[k].className="";
            }
            _p[n].className = "on";
        }
        
        //小圆点点击事件
        for(var n = 0;n < _p.length;n++){
            _p[n].setAttribute("aindex",n);    
            _p[n].onclick = function(){
                var newIndex = this.getAttribute("aindex") * 1;
                fadeOut(pic[num]);
                fadeIn(pic[newIndex]);
                num = newIndex;
                showDot(num);
            }
        }
        
        function autoPlay(){
            timer =    setInterval(converNext,2000);
            
        }
        autoPlay();
        
        btn1.onclick = converPrev;
        btn2.onclick = converNext;
        
        _box.onmouseout = function(){
            autoPlay();
            btn1.style.display = "none";
            btn2.style.display = "none";
        }
        
        _box.onmouseover = function(){
            clearInterval(timer);
            btn1.style.display = "block";
            btn2.style.display = "block";
        }
        
        
    </script>

Related recommendations:

JS Loop carousel image

JQuery image carousel effect implementation example

jQuery implementation of left and right carousel image effect sharing

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