Tutoriel d'exemple de carrousel d'écriture en js natif

Dans cet article, nous partagerons avec vous un exemple de tutoriel sur l'écriture d'un carrousel en js natif. Apprenons-le ensemble avec du code html et css.

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

code html

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

code javascript

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

Recommandations associées :

Image de carrousel de boucle JS

Exemple d'implémentation de l'effet de carrousel d'image JQuery

jQuery réalise l'effet d'image de carrousel gauche et droit Partager

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!