原生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);就可以實現輪播效果

代碼很簡單，細心觀察，你也是大神

用原生js封裝輪播圖