自定义轮播图

html结构: ul#selector > li > img


js: 改 es6 class写法

class Swiper {
  constructor() {
    this.transition = "-webkit-transition: -webkit-transform .3s ease";
    this.css = [
      "z-index: 3; -webkit-transform: translate3d(0, 0, 10px) scale3d(1, 1, 1); visibility: visible;",
      "z-index: 2; -webkit-transform: translate3d(" + this.rem(-148) + ", 0, 6px) scale3d(.8, .8, 1); visibility: visible;",
      "z-index: 2; -webkit-transform: translate3d(" + this.rem(148) + ", 0, 6px) scale3d(.8, .8, 1); visibility: visible;",
      "z-index: 1; -webkit-transform: translate3d(" + this.rem(-240) + ", 0, 2px) scale3d(.667, .667, 1); visibility: visible;",
      "z-index: 1; -webkit-transform: translate3d(" + this.rem(240) + ", 0, 2px) scale3d(.667, .667, 1); visibility: visible;"
    ];
    this.x0 = null;
    this.y0 = null;
    this.hasmoved = 0;
    this.lock = 0;
    this.container = null;
    this.item = [];
    this.visual = [];
    this.queue = [];
    return this;
  }


  touchstartHandle(e) {
    var touch = e.targetTouches[0], x = touch.pageX, y = touch.pageY;
    this.x0 = x;
    this.y0 = y;
    this.hasmoved = 0;
    this.lock = 0;
  }


  touchmoveHandle(e) {
    if(this.lock) return ;
    var touch = e.targetTouches[0], x = touch.pageX, y = touch.pageY, offsetX = this.x0 - x, offsetY = this.y0 - y;
    // 阻止滚动
    this.hasmoved || (this.hasmoved = 1, Math.abs(offsetX) > Math.abs(offsetY) && e.preventDefault());
    if(offsetX <= -50) {
      // 向右
      this.queue.unshift(this.queue.pop());
      this.lock = 1;
      this.swap();
    } else if(offsetX >= 50) {
      // 向左
      this.queue.push(this.queue.shift());
      this.lock = 1;
      this.swap();
    }
  }


  swap(withoutTransition) {
    var queue = [].concat(this.queue),
      count = 0,
      len = this.visual.length,
      visual = new Array(len),
      odd = 1;
    // 提取前三个元素与后三个元素
    while(count<5 && queue.length>0) {
      visual[odd ? queue.shift() : queue.pop()] = this.css[count++] + (withoutTransition ? "" : this.transition);
      odd = !odd; // 取反
    }
    // 对比一下数组
    for(var i=0; i<len; ++i) {
      visual[i] != this.visual[i] && (
        this.visual[i] = visual[i],
        this.item[i].style.cssText = this.visual[i] || "visibility: hidden"
      );
    }
  }


  rem(px) {
    return px / 40 + "rem";
  }


  init(selector) {
    const list = document.querySelector(selector);
    list ? this.createSwiper(list) : console.log(selector + " undefined");
  }


  createSwiper(list) {
    this.container = list;
    list.style["-webkit-transform-style"] = "preserve-3d";
    this.item = list.querySelectorAll("li");
    for(var i=0; i<this.item.length; ++i) {
      this.item[i].style.visibility = "hidden"
    }
    this.queue = Array.from({length: this.item.length}, (v, i) => i)
    this.visual = new Array(this.item.length); // 与 item 做对应的虚拟DOM
    this.swap("without transition"); // 初始排版
    if(this.item.length <= 1) return ;
    this.container.addEventListener("touchstart", this.touchstartHandle.bind(this), false);
    this.container.addEventListener("touchmove", this.touchmoveHandle.bind(this), false);
  }
}

调用: const swiper = new Swiper(); swiper.init("#selector")


如果想直接调用不实例的话 直接给构造方法里的返回就行 return this.init(selector) ,     调用: new Swiper('#selector')

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以参考以下步骤来自定义一个 Vue 轮播图组件: 1. 创建一个 Vue 组件,并定义需要的属性。例如,轮播图列表、轮播图宽度、轮播时间间隔等。 ```javascript <template> <div class="carousel"> <div class="carousel-wrapper" :style="{ width: wrapperWidth + 'px' }"> <div class="carousel-content" :style="{ transform: 'translateX(' + translateX + 'px)' }"> <div v-for="(item, index) in list" :key="index" class="carousel-item" :style="{ width: itemWidth + 'px' }"> <img :src="item.src" alt=""> </div> </div> </div> </div> </template> <script> export default { name: 'Carousel', props: { list: { type: Array, default: () => [] }, interval: { type: Number, default: 3000 }, width: { type: Number, default: 600 } }, data() { return { currentIndex: 0, itemWidth: 0, wrapperWidth: 0, translateX: 0, timer: null } }, mounted() { this.init() }, methods: { init() { this.itemWidth = this.width this.wrapperWidth = this.width * this.list.length this.autoPlay() }, autoPlay() { this.timer = setInterval(() => { this.next() }, this.interval) }, next() { this.currentIndex = (this.currentIndex + 1) % this.list.length this.translateX = -this.currentIndex * this.itemWidth } } } </script> ``` 2. 在组件中实现轮播图的逻辑。例如,自动播放、手动滑动等。 3. 根据需要添加样式,使组件的 UI 更美观。 4. 在父组件中使用自定义轮播图组件。 ```javascript <template> <div> <carousel :list="list" :interval="3000" :width="600"></carousel> </div> </template> <script> import Carousel from './Carousel.vue' export default { name: 'App', components: { Carousel }, data() { return { list: [ { src: 'https://picsum.photos/600/300?random=1' }, { src: 'https://picsum.photos/600/300?random=2' }, { src: 'https://picsum.photos/600/300?random=3' } ] } } } </script> ``` 以上就是自定义 Vue 轮播图组件的基本步骤。当然,可以根据实际需要进行更多的扩展和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值