实现无缝轮播的简单实例

本是古典何须时尚 2022-05-17 03:43 124阅读 0赞

/\*\*  
\* 图片轮播过程分析  
\* 假设一共有5张图片，克隆第一张图片放在最后，现在一共有6张图。  
\* 轮播中图片显示的顺序为：  
\* 1 2 3 4 5 (6–>1) 2 3 4 5 (6–>1) ….  
\* (6—>1)表示图片显示第6张图片(克隆自第一张图片)后，迅速的将图片容器滚动到开始的位置,即第一张图片  
\* 这也是无缝轮播的秘密所在，由于切换为同一张图片，且切换的时间很小，所以人眼看不出来。  
\* 图片对应锚点的顺序为：  
\* 0 1 2 3 4 0 1 2 3 4 0  
\* 图片显示时容器的位置:  
\* 0 -100% -200% -300% -400% (-500%–>0) -100% -200% -300% -400% (-500%–>0)  
\*/  
html结构：

scss代码：

@charset "utf-8";
    /*此css文件在scss中编写，如果要修改此文件，请到scss中修改*/
    @function px2rem($value) { 
      @if unitless($value) { 
        @return unquote(($value/18.75) + 'rem');
      } @else { 
        $flag: $value / ($value*0+1);   //去掉单位
        @return unquote(($flag/18.75) + 'rem');
      }
    }
    
    html,
    body,
    .main{
        width: 100%;
        height: 100%;
    }
    
    body{
        overflow: hidden;
    }
    
    .swiper-container{
        position: relative;
        width: 100%;
        font-size: 0;
        img{
            display: inline-block;
            width: 100%;
            height: auto;
            vertical-align: top;
        }
        .swiper-wrapper{
            position: relative;
            left: 0;
            top: 0;
            width: 100%;
            z-index: 1000;
            display: flex;
            -webkit-transition-property: -webkit-transform;
            -moz-transition-property: -moz-transform;
            -ms-transition-property: -ms-transform;
            -o-transition-property: -o-transform;
            transition-property: transform;
            -webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
        .swiper-slide{
            position: relative;
            width: 100%;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            -webkit-flex-shrink: 0;
            -moz-flex-shrink: 0;
            flex-shrink: 0;
        }
        .swiper-pagination{
            position: absolute;
            right: 5%;
            bottom: 10%;
            z-index: 1000;
            height: 0.32rem;
            li{
                display: inline-block;
                width: 0.32rem;
                height: 100%;
                background: rgba(255, 255, 255, 0.6);
                margin-left: px2rem(8);
                &.active{
                    width: 2.4rem;
                    background: rgba(255, 255, 255, 1);
                }
            }
        }
    }

js代码：

KB.domLoad('load',function () {
        class OperateClassName{ 
            constructor(el, className) {
                if (KB.checkType.isElement(el)) {
                    this.el = el;
                }
                if (KB.checkType.isString(className)) {
                    this.className = className;
                }
                if (!this.el || !this.className) {
                    throw new Error("class OperateClassName constructor function params error!");
                }
            }
    
            haveClassName() {
                return this.el.classList.contains(this.className);
            }
    
            removeClassName() {
                if (this.haveClassName()) {
                    this.el.classList.remove(this.className);
                }
            }
    
            addClassName() {
                if (!this.haveClassName()) {
                    this.el.classList.add(this.className);
                }
            }
        }
    
        class ImagesLoop{ 
            constructor() {
                // 获取所有图片容器的dom节点
                this.wrapperEl = document.querySelector(".swiper-wrapper");
                // 获取每个图片容器的dom节点
                // 不能使用querySelector，因为当节点变化时querySelector不能实时的查询
                this.slideEls = this.wrapperEl.getElementsByClassName("swiper-slide");
                // 获取锚点的容器的节点
                this.paginationEl = document.querySelector(".swiper-pagination");
                // 获取所有锚点节点
                this.targetEls = this.paginationEl.getElementsByClassName("swiper-pagination-customs");
                try {
                    // 计算锚点数目
                    this.targetNum = this.targetEls.length;
                    // 计算图片数目
                    this.SLIDENUM = this.slideEls.length;
                    // 复制最后一个节点并添加到容器的顶部
                    this.wrapperEl.style.display = "none";
                    this.wrapperEl.appendChild(this.clone(this.slideEls[0]));
                    this.wrapperEl.style.display = "flex";
                    this.SLIDENUM++;
                } catch (e) {
                    console.error(e);
                }
                // 设置轮播的时间
                this.TIMERTIME = 3000;
                this.animateDuration = 300;
                // 保存上一张图片显示对应的锚点
                this.previousIndex = 0;
                // 设置当前显示的节点
                this.activeIndex = 1;
                // 设置定时器
                this.timer = null;
                KB.print('ImagesLoop constructor', {
                    wrapperEl: this.wrapperEl,
                    slideEls: this.slideEls,
                    slideNum: this.SLIDENUM,
                    paginationEl: this.paginationEl,
                    targetNum: this.targetNum
                });
                this.init();
            }
    
            /** * 初始化函数 * @return undefined */
            init() {
                this.start();
            }
    
            /** * 启动函数 * @return undefined */
            start() {
                this.timer = setInterval(() => {
                    let _self = this;
    
                    ++_self.activeIndex;
                    _self.slidesWrapper(_self.activeIndex);
                    if (_self.activeIndex == _self.SLIDENUM) {
                        _self.slidesWrapper(_self.activeIndex, true);
                        _self.activeIndex = 1;
                        _self.setActiveAnchorClass(_self.activeIndex);
                    }
    
                    _self.setActiveAnchorClass(_self.activeIndex);
    
                    KB.print('ImagesLoop start', {
                        'this': _self,
                        'wrapperEl': _self.wrapperEl,
                        "activeIndex": _self.activeIndex,
                        "slideNum": _self.SLIDENUM
                    });
                }, this.TIMERTIME);
            }
    
            /** * 停止函数 * @return {[type]} [description] */
            stop() {
                if (this.timer) {
                    clearInterval(this.timer);
                    this.timer = null;
                }
            }
    
            /** * 克隆dom节点 * @param object node 要复制的DOM节点 * @return object 复制后的DOM节点 */
            clone(node) {
                if (!KB.checkType.isElement(node)) {
                    throw new Error("The param of function node must be a element!");
                }
                return node.cloneNode(true);
            }
    
            /** * 图片容器滑动 * @return undefined */
            slidesWrapper(index, reset = false) {
                try {
                    if (reset) {
                        let timer = setTimeout(() => {
                            this.wrapperEl.style.transitionDuration = "0ms";
                            this.wrapperEl.style.transform = "translate3d(0, 0, 0)";
                            if (timer) {
                                clearTimeout(timer);
                                timer = null;
                                return;
                            }
                        }, this.animateDuration + 20);
                        return;
                    }
                    this.wrapperEl.style.transitionDuration = this.animateDuration + "ms";
                    let x = -100;
                    x = x * (index - 1) + "%";
                    this.wrapperEl.style.transform = "translate3d(" + x + ", 0, 0)";
                } catch (e) {
                    console.error(e);
                }
            }
    
            /** * 设置轮播图的锚点 * @param {[type]} index [description] */
            setActiveAnchorClass(index) {
                if (!KB.checkType.isNumber(index)) {
                    return;
                }
                let _preIndex = this.previousIndex;
                let _index = index - 1;
                const ACTIVECLASSNAME = "active";
                let operateClassName = null;
                try {
                    operateClassName = new OperateClassName(this.targetEls[_preIndex], ACTIVECLASSNAME);
                    operateClassName.removeClassName();
                    operateClassName = new OperateClassName(this.targetEls[_index], ACTIVECLASSNAME);
                    operateClassName.addClassName();
                    this.previousIndex = _index;
                } catch (e) {
                    console.error(e);
                }
            }
        }
    
    
        let imagesLoop = new ImagesLoop();
    
    });

轮播结构的css有一处值得学习的代码：

parentNode: { display: flex; }
    childNode: { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-flex-shrink: 0; -moz-flex-shrink: 0; flex-shrink: 0; }

这里的parentNode指的是轮播容器，childNode指的是每个轮播的项目。这是swiper.js中使用的方法，使得子元素排成一列且父元素的宽度不被撑大。以往我们对轮播容器的设置有两种方法：  
①在css中给容器设置一个很大的宽度或高度。  
②使用js根据内容计算容器的宽度或高度。  
但是现在有第三种的方法来实现：  
**使用flex布局来实现。**

js中的难点在于如何实现（6—>1）,注意下面的代码：  
start() 函数

if (_self.activeIndex == _self.SLIDENUM) {
        _self.slidesWrapper(_self.activeIndex, true);
        _self.activeIndex = 1;
        _self.setActiveAnchorClass(_self.activeIndex);
    }

slidesWrapper(index, reset = false)函数：

if (reset) {
        let timer = setTimeout(() => { this.wrapperEl.style.transitionDuration = "0ms"; this.wrapperEl.style.transform = "translate3d(0, 0, 0)"; if (timer) { clearTimeout(timer); timer = null; return; } }, this.animateDuration + 20); return; }

在将要轮播到第6张图片时，我们开启一个定时器，该定时器在activeIndex等于6时触发。  
这时候的过程：  
/\*  
\*轮播容器滑动到第六张图片（滑动的时间是this.animateDuration）  
\*滑动到第六张图片20ms后执行setTimeout定时器的内容（此时时间要小于setInterval定时器的时间this.TIMERTIME和图片每次滑动的时间this.animateDuration）  
\*setTimeout定时器的内容是将图片容器立即回滚到第一张图片  
\*/  
这样就实现了图片的无缝轮播。