用原生js封装轮播图

Posted 2020-10-15 happy0

原生js封装轮播图

对于初学js的同学来说，轮播图还是一个难点，尤其是原生js封装轮播图代码，下面是我之前做的一个轮播图项目中封装好的一些代码，有需要的同学可以看一下，有什么不懂的可以看注释，注释看不懂的可以直接私信我

slide.js

/*
 * 轮播图
 */

function Slide(elem, ms, d, ind){
    this.el = elem;
    this.w = parseInt(getStyle(elem, "width"));
    this.h = parseInt(getStyle(elem, "height"));
    var a = this.el.children;
    this.ul = a[0];
    this.ol = a[1];
    this.lBtn = a[2];
    this.rBtn = a[3];
    this.olspan = this.ol.getElementsByTagName("span");
    this.l = this.olspan.length;
    this.ul.style.width = this.w*(this.l+1)+"px";   // ul的宽度
    this.lBtn.style.top = this.rBtn.style.top = (this.h-this.rBtn.offsetHeight)/2+"px";
    this.ms = ms;   // 每隔多久执行一次滚动
    this.d = d; // 轮播时方向
    
    this.ul.innerhtml += this.ul.children[0].outerHTML; //将第一张图片复制到最后一个位置上
    
    var that = this;
    
    this.now = ind;
    that.prev = -that.now*that.w;
    
    this.run = function(){
        var i=0, l=that.l, btns=that.olspan, btn;
        for( ; i<l; i++){
            btn = btns[i];
            btn.i = i;
            btn.onclick = function(){
                that.now = this.i;
                that.tab();
            }
        }
        
        that.timer = setInterval(that.next, that.ms);
        that.el.onmouseover = that.over;
        that.el.onmouseout = that.out;
        that.lBtn.onclick = function(){
            that.now--;
            that.d = -1;
            that.tab();
        }
        that.rBtn.onclick = function(){
            that.now++;
            that.d = 1;
            that.tab();
        }
        that.lBtn.onmousedown = that.rBtn.onmousedown = function(){
            return false;
        }
    }
    
    this.tab = function(){
        that.ul.style.left = that.prev+"px";    // 每次运动时，先瞬间定位到上一次的目标值，然后再执行本次运动
        
        if( that.now == that.l ){
            that.prev = 0;
            startMove(that.ul, {"left":-that.now*that.w}, function(){
                that.ul.style.left = "0px";
            });
            that.now = 0;
        }else if( that.now == -1 ){
            that.now = that.l-1;
            that.ul.style.left = -that.l*that.w+"px";
            that.prev = -that.now*that.w;
            startMove(that.ul, {"left":that.prev});
        }else{
            that.prev = -that.now*that.w;
            startMove(that.ul, {"left":that.prev});
        }
        
        // 样式
        for( var i=0,l=that.l; i<l; i++ ){
            that.olspan[i].className = "";
        }
        that.olspan[that.now].className = "selected";
    }
    
    this.next = function(){
        that.now += that.d;
        that.tab();
    }
    
    this.over = function(){
        clearInterval(that.timer);
        startMove(that.lBtn, {"opacity":100});
        startMove(that.rBtn, {"opacity":100});
    }
    this.out = function(){
        that.timer = setInterval(that.next, that.ms);
        startMove(that.lBtn, {"opacity":0});
        startMove(that.rBtn, {"opacity":0});
    }
    
    this.tab();
    this.run();
}

startMove.js(运动函数)

/*
 * 运动函数
 * 参数：
 * elem 指操作的元素
 * obj 指操作的元素节点上的css属性及它的目标值
 *          attr 指操作的元素节点上的css属性
 *          target 指操作的元素节点上的css属性的目标值
 * fn 指运动函数执行完，执行哪一个函数
 */
function startMove(elem, obj, fn){
    // 清除定时器
    clearInterval(elem.timer);
    // 多属性同时运动时，是否每一个属性都到了目标值
    // 开启定时器
    elem.timer = setInterval(function(){
        var flag = true;    // 默认时认为到了目标值 
        // 支持多属性同时运动
        for( var attr in obj ){
            // 目标值
            var target = obj[attr];
            // 判断属性是否为透明度
            var v; // 获取当前值
            if( attr == "opacity" ){
                v = getStyle(elem, attr);
                v = Math.round(v*100);
            }else{              
                v = parseInt(getStyle(elem, attr));
            }
            //console.log(v);
            // 目标值与当前值的间距
            var dist = target - v;
            // 求步长
            var speed = dist/6;
            // 步长取整数
            if(speed>0){
                speed = Math.ceil(speed);
            }else{
                speed = Math.floor(speed);
            }
            // 更新
            if( attr == "opacity" ){
                elem.style.opacity = (v+speed)/100;
                if(/MSIE/.test(navigator.userAgent)){// 如果当前浏览器为IE，则执行兼容代码
                    elem.style.filter = "alpha(opacity="+(v+speed)+")"; // 兼容低版本IE
                }
            }else{
                elem.style[attr] = v+speed+"px";
            }
            // 如果没有到达目标值
            if(v!=target){
                flag = false;
            }
            //console.log(0);
        }
        // 如果已经到达目标值，则停止定时器
        if( flag ){
            clearInterval(elem.timer);
            if( fn ){   // 如果给定了第三个参数，则执行该函数
                fn();
            }
        }
    }, 50); 
    
}

/*
 * 获取行间样式
 */
function getStyle(elem, attr){
    if( window.getComputedStyle ){
        return getComputedStyle(elem, null)[attr];
    }else{
        return elem.currentStyle[attr];
    }
}

接下来是一些简单的css代码

/*
 * 轮播图
 */

.slide{
    position: relative;
    overflow: hidden;
}
.slide *{
    margin: 0;
    padding: 0;
}
.slide li{
    float: left;
    list-style: none;
}
.slide>ul{
    position: absolute;
    left: 0;
    top: 0;
}
.slide>ul>li{
    
}
.slide>ol{
    position: absolute;
    right: 0;
    bottom: 0;
}
.slide>ol>li{
    padding: 10px;
}
.slide>ol>li>span{
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: white;
    cursor: pointer;
}
.slide .selected{
    background: greenyellow;
}

.slide>p{
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 25px;
    border-radius: 15px;
    background: white;
    cursor: pointer;
    opacity: 0;
}
.slide>p:hover{
    background: greenyellow;
}
.slide>p:nth-child(3){
    left: 10px;
}
.slide>p:nth-child(4){
    right: 10px;
}

使用方法

<div id="div1" class="slide">
    <ul>
        <li><img src="img/001.jpg"/></li>
        <li><img src="img/002.jpg"/></li>
        <li><img src="img/003.jpg"/></li>
        <li><img src="img/004.jpg"/></li>
    </ul>
    <ol>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
    </ol>
    <p>&lt;</p>
    <p>&gt;</p>
</div>

接下来在script中直接new一个实例,new Slide(div1, 3000, 1, 1);就可以实现轮播效果

代码很简单，细心观察，你也是大神