Native js writing carousel example tutorial-JS Tutorial-php.cn

Native js writing carousel example tutorial

小云云

Release： 2017-12-13 10:40:53

Original

1567 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!