네이티브 JS 작성 캐러셀 예제 튜토리얼

本文我们将和大家分享原生js写轮播实例教程，结合html、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>

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>

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>

相关推荐：

JS循环轮播图

JQuery图片轮播效果的实现实例

jQuery实现左右轮播图效果的分享

위 내용은 네이티브 JS 작성 캐러셀 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!