徐向博 / Imin.

原生JS移动端轮播插件
作者:Imin 时间:2018-11-09 分类: 前端

加班到现在,先把代码贴出来,有时间再写文档。

var slide = document.querySelector('.imslide'),
    wraper = document.querySelector('.imslide-wraper'),
    item = document.querySelectorAll('.imslide-item'),
    pointer = document.querySelector('.imslide-pointer');
var imslide = function(data){
    data = data || {};
    var that = this,
        runAuto = data.runAuto || false,
        runTime = data.runTime || 3000,
        loop = data.loop || false,
        height = data.height || 200,
        docWidth = slide.offsetWidth,
        imgNum = item.length,
        startX = 0,
        endX = 0,
        runto = 0,
        runpos = 0,
        left = 0;
    // 当前版本:设置runAuto属性,runTime默认值为3000毫秒
    // 可选版本:不设置runAuto属性,设置runTime时自动runAuto=true,否则runAuto=false
    /*if(data.runTime){
        runAuto = true;
        runTime = data.runTime;
    }else{
        runAuto = false;
    }*/
    // 初始化样式
    that.initStyle = function(){
        slide.style.cssText = 'width: ' + docWidth + 'px; overflow-x: hidden; position: relative;';
        wraper.style.cssText = 'width: ' + docWidth * imgNum + 'px; display: flex; justify-content: flex-start; position: relative; left: 0px';
        pointer.style.cssText = 'width: 100%; text-align: center; position: absolute; bottom: 10px;';
        for(var i=0; i<item.length; i++){
            // 设置图片宽度
        	item[i].style.width = docWidth + 'px';
        	item[i].querySelector('img').style.cssText = 'width: ' + docWidth + 'px; height: ' + height + 'px;';
            // 创建pointer
            var span = document.createElement('span');
            span.style.cssText = 'display: inline-block; width: 10px; height: 10px; background: rgba(0,0,0,0.3); margin: 0 5px; border-radius: 50%;';
            pointer.appendChild(span);
        }
        pointer.querySelector('span').style.cssText += 'background: rgba(255,255,255,0.8)';
    }
    that.initStyle();
    slide.addEventListener('touchstart', function(e){
        startX = e.changedTouches[0].pageX;
    })
    slide.addEventListener('touchend', function(e){
        endX = e.changedTouches[0].pageX;
        var moveNum = Math.abs(endX - startX);
        // 滑动距离不超过30px,视为点击
        if(moveNum > 30){
            // runto  0=左滑,1=右滑
            endX - startX > 0 ? runto = 1 : runto = 0;
            that.run(runto);
        }
    })
    // 监听滚动
    that.run = function(runto){
        if(runto){
            left = left + docWidth;
            runpos--;
            // 如果当前是第一张
            if(runpos < 0){
                if(loop){
                    runpos = item.length - 1;
                    left = -docWidth * (item.length - 1);
                }else{
                    left = left - docWidth;
                    runpos++;
                }
            }
            that.posmove(runpos);
        }else{
            left = left - docWidth;
            runpos++;
            // 如果当前是最后一张
            if(runpos >= item.length){
                if(loop){
                    runpos = 0;
                    left = 0;
                }else{
                   left = left + docWidth;
                   runpos--;
                }
            }
            that.posmove(runpos);
        }
        wraper.style.cssText += 'transition: left 0.5s; left: ' + left + 'px';
    }
    // 监听pointer
    that.posmove = function(pos){
        for(var i=0; i< item.length; i++){
            pointer.querySelectorAll('span')[i].style.cssText = 'display: inline-block; width: 10px; height: 10px; background: rgba(0,0,0,0.3); margin: 0 5px; border-radius: 50%;';
        }
        pointer.querySelectorAll('span')[pos].style.cssText += 'background: rgba(255,255,255,0.8)';
    }
    // 自动播放
    that.autorun = function(pos){
    	function timeRun(){
            that.run(0);
            setTimeout(timeRun, runTime);
        }
        setTimeout(timeRun, runTime);
    }
    runAuto ? that.autorun() : null; 
}

待续...

本文标签: 轮播