从零开始写一个轮播

什么是轮播

轮播,英文slider,也就是幻灯片的意思,我们可以手动或者自动切换一张张的照片达到显示的目的。各大电商网站都会使用轮播来展示商品,可以在相对较小的空间里,实现多种展示。

怎么实现一个轮播

一般,我们可以两种方法来实现轮播,例如,核心思路使用透明度来切换照片,使用距离来平移照片。在这里我们使用平移的方式来实现轮播,并通过几组核心数据来实现slide的切换,此外,一般还具有多种方法可以实现无缝切换。

需求分解

我们实现的轮播,所需要具有的功能可以分为以下几部分:

  1. 点击左右箭头,前后切换slide
  2. 无缝切换轮播
  3. 点击轮播中的导航按钮,切换不同的slide
  4. 初始状态会每隔3s自动切换slide
  5. 鼠标悬浮在slide上时,自动轮播停止,移出后会恢复自动轮播状态
  6. 考虑复用性,抽象为一个组件,其他如点击切换等功能考虑为插件注入

1. 向前和向后切换和无缝切换

1. 结构和样式

我们设置两个容器,通过在父容器使用transform进行左右平移,translateX()是相对于自身的宽度,而在子容器里通过绝对定位来进行平移,其中left属性相对的是父容器的宽度,这样父容器平移100%,子容器距离左边-100%,就可以相互抵消。

HTML结构如下

<div id="m-slider">
  <div class="slide">
    <img >
  </div>
  <div class="slide">
    <img >
  </div>
  <div class="slide">
    <img >
  </div>
</div>
<button id="prev">prev</button>
<button id="next">next</button>

CSS如下,略有删减,可以参考源码

#m-slider {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
}
.slide {
  position: absolute;
}
 .slide:nth-child(1) {
  left: 0%;
}
.slide:nth-child(2) {
  left: 100%;
}
.slide:nth-child(3) {
  left: 200%;
} 

此时我们知道可以显示第二张图片。

2. 前后逻辑控制

数据模型:

  1. slideIndex为slide的索引,取值为0,1,2,表示始终只有三张图片在HTML结构当中。
  2. offset表示当前距离最左边切换图片的数量,每次向后切换时,都会加1,取值范围为1~图片的总数量

相关说明:

  1. normalIdx()方法是一个将数字转换为len范围的方法,接收索引和长度,返回一个在len之内的数值,这里的len固定为3
  2. go()方法,接收1或者-1,分别表示向前和向后移动,以向前移动为例,此时做了两件事,相关所以会更新,改变容器的偏移,主要是offsetslideIndex会发生变化,都需要调用规范化方法,使其数值始终处于3之内。
  3. calcDistance()方法为计算移动距离的方法,主要有父容器和slide的距离计算。
var slider = document.getElementById('m-slider')
var slides = document.querySelectorAll('.slide')
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var slideIndex = 1; // one of 0,1,2
var offset = 1; // 显示的slide距容器最左边的偏移量

prev.onclick = function() {
    go(-1);
}
next.onclick = function() {
    go(1);
}
function normalIdx(index,len) {
  return (index + len) % len;
}
function go(foreward) {
  
  offset += foreward; // 向右移动了一个,所有偏移量也需要加一
  slideIndex += foreward; // 向右移动了一个,所以加一,需要归三化
  slideIndex = normalIdx(slideIndex,3);
  var prevIndex =  normalIdx(slideIndex - 1,3);
  var nextIndex =  normalIdx(slideIndex + 1,3);
  calcDistance(prevIndex,slideIndex,nextIndex,offset);
}
function calcDistance(prevIndex,slideIndex,nextIndex,offset) {
  slider.style.transform = `translateX(${-100*offset}%)`
  //console.log(slider.style.transform)
  console.log(offset)
  // slide offseet
  slides[prevIndex].style.left = `${100*(offset-1)}%`;
  slides[slideIndex].style.left = `${100*offset}%`;
  slides[nextIndex].style.left = `${100*(offset+1)}%`;
}

2. 无缝轮播

每次切换时,slideleft属性都会改变,父容器的transform也发生改变,相互抵消,轻松实现无缝切换,注意: 我们这里只设置了三张照片,刚好与要求一致,并没有对相关数据进行计算处理。

/** 不管轮播的照片有多少,只有三栏是常驻的
 *      -------------------
 *      |     |     |     |  
 * -------------------------------
 * |    |     |     |     |      |
 * |    |     |     |     |      |
 * |    |  1  |  2  |  3  |      |
 * |    |     |     |     |      |
 * |    |     |     |     |      |
 * -------------------------------
 *      |     |     |     |
 *      -------------------
 */

3. 面向对象化

我们将前面写的业务代码,用面向对象的思想来重构一下。

HTML发生一些改变,我们将Img通过JS动态注入

<div id="m-slider">
  <div class="slide"> </div>
  <div class="slide"> </div>
  <div class="slide"> </div>
</div>
<button id="prev">prev</button>
<button id="next">next</button>

JS部分,这里`pageNum表示图片的总数量,可以为任意数字,renderImg()为渲染图片的方法,主要在切换的时候改变图片的url,第一次需要进行初始化。


// Component
class Slider {
    constructor(el) {
      // omit some code
      this.offset = 1;// 偏移量,即个数
      this.slideIndex = 1;// slide index one of 0, 1, 2
      this.pageIndex = 1;// page index of total pictures
      this.pageNum = 6;// total pictures
  }
  // 标准化index,使index始终为0,1,2中的一个
  normalIdx(index,len) {
    return (index + len) % len;
  }
  
  // slide move according to the flag
  go(flag) {
    // 1. offset and slideIndex change
    this.offset += flag;
    this.pageIndex += flag;
    const slideIndex = this.slideIndex = this.normalIdx( this.slideIndex += flag,3);
     
     // 计算移动距离
     this.calcDistance();
  }
  
  // style change
  calcDistance() {
      const offset = this.offset;
    const slideIndex = this.slideIndex;
    // index
    const prevIndex = this.normalIdx( slideIndex - 1, 3)
    const nextIndex = this.normalIdx( slideIndex + 1, 3)
    this.pageIndex = this.normalIdx(this.pageIndex,this.pageNum) 

    // 2. container and slide move
    this.container.style.transform = `translateX(${-100 * (offset)}%) `;
    this.slides[prevIndex].style.left = `${100 * (offset - 1)}%`;
    this.slides[slideIndex].style.left = `${100 * offset}%`;
    this.slides[nextIndex].style.left = `${100 * (offset + 1)}%`;
    //console.log(this.pageIndex,this.slideIndex)
    this.renderImg(this.pageIndex,this.slideIndex);
  }
  renderImg(pageIndex,slideIndex) {
      for(let i = -1; i <= 1; i++) {
      const index = (slideIndex+i+3) % 3; // 决定图片的url和left漂移
      let img = this.slides[index].querySelector('img');
      let picId = this.normalIdx( pageIndex + i, this.pageNum) + 1;
      
      // 页面初始化使用,运行一次
      if(!img) {
        img = document.createElement('img');
        this.slides[index].appendChild(img);
      }
      img.src = 'http://placehold.it/300x200&text=' + picId + '-Mint';
    }
  }
  start() {
      this.bindEvents()
    this.renderImg(1,1);
  }
}

const mySlider = new Slider('m-slider');
mySlider.start()

4. 完整版

Source

添加了nav功能,点击对应的小按钮,即可跳转到指定的slide上

5. 后记

后期将考虑将轮播进行组件化,封装成独立的组件,添加更多可定制的功能。

    原文作者:窗里窗外
    原文地址: https://segmentfault.com/a/1190000015185696
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞