原生js实现轮播图-蒲公英云

原生js实现轮播图

我就是我 2022-04-11 12:45 431阅读 0赞

轮播图基本上是前端所必须面临的一个功能。而且在网上可以找到各种各样的插件或者写法。

但是我个人觉得还是写一下比较好。这里用到的是原生JS、CSS3相结合的写法。

对IE 8以下的兼容性不是太好。但相对于浏览器使用情况来说，还是可以的。

下边是css样式：

body{margin: 0;padding: 0;}
img{border: none;vertical-align: middle;}
.banner{width: 500px;height: 181px;overflow: hidden;margin: 100px auto 0;}
.banner-conent a{display: block;text-decoration: none;float: left;}
.banner-conent img{width: 500px;height: 181px;}

复制代码

<div class="banner">
    <div class="banner-conent">
        <a href="#">
            <img src="../image/livehouse@3x.png">
        </a>
        <a href="#">
            <img src="../image/livehouse@3x.png"> 
        </a>
        <a href="#">
            <img src="../image/livehouse@3x.png">
        </a>
    </div>
</div>

复制代码

通过transitoinEnd事件对象来实现图片的切换。

复制代码

var itcast={
    /*transitoinEnd:事件对象，在 CSS 完成过渡后触发。*/
    transitoinEnd:function(dom,fn){
         if(dom && typeof dom ==='object'){                  
             dom.addEventListener("webkitTransitionEnd",function(){
                 fn && fn();
             });          
             dom.addEventListener("transitionEnd",
                function() {
                    fn && fn();
                }
                         )
        }
     }
}

复制代码

获取元素以及相关变量的声明：

复制代码

var banner = document.querySelector(".banner");/*获取最外层元素*/
    var imageBox=banner.querySelector(".banner-conent");/*获取父级元素*/
    imageBox.style.width= 3*100+"%"; /*通过子级元素算出父级元素的宽度*/
    var w=banner.offsetWidth;
    var index=0;
    var img_length = 3;
    /*添加过滤效果*/
    var addTransition=function(){
            imageBox.style.transition="all 0.5s";
            imageBox.style.webkitTransition="all 0.5s";
        };
    /*移除效果*/        
    var removeTransition=function(){
            imageBox.style.transition="none";
            imageBox.style.webkitTransition="none";
        }
    /*设置偏移量*/
    var addTranslate=function(w){
            imageBox.style.transform="translateX("+w+"px)";
            imageBox.style.webkitTransform="translateX("+w+"px)";
        }

复制代码

开启定时器：

复制代码

/*通过定时器来控制轮播速度*/
    var timer=setInterval(function(){
            addTransition();
            index++;
            addTranslate(-index*w);      
        },3000);

　　itcast.transitoinEnd(imageBox,function(){
　　　　if(index<0)\{ 　　　　　　index=img\_length; 　　　　　　removeTransition(); 　　　　　　addTranslate(-index \* w); 　　　　\} 　　　　else if(index>=(img_length)){
　　　　　　index=0;
　　　　　　removeTransition();
　　　　　　addTranslate(-index * w);
　　　　}
　　});

复制代码

添加左右滑动事件

复制代码

var startX=0;
    var moveX=0;
    var distinceX=0;
    var isMove=false;
    /*左右滑动事件*/
    imageBox.addEventListener("touchstart",function(event){
        clearInterval(timer);
        startX=event.touches[0].clientX;        
    });
    imageBox.addEventListener("touchmove",function(event){
        isMove=true;
        moveX=event.touches[0].clientX;
        distinceX=moveX-startX;
        var current=(-index*w)+distinceX;
        removeTransition();
        addTranslate(current);
    })
    imageBox.addEventListener("touchend",function(){
        if(isMove && Math.abs(distinceX)>w/3){
            if(distinceX>0){
                index--;
            }else{
                index++;
            }
            addTransition();
            addTranslate(-index*w);
        }else{
            addTransition();
            addTranslate(-index*w);
        }
        timer=setInterval(function(){
            index++;
            addTransition();
            addTranslate(-index*w);
        },3000);
    })