vue实现自动滑动轮播图片

Catherine ·

更新时间:2024-09-20

· 508 次阅读

本文实例为大家分享了vue实现自动滑动轮播图片的具体代码，供大家参考，具体内容如下

效果如图：(悬浮时暂停，移出后自动轮播)

①创建图片滑动轮播组件ImageSlider.vue，可设置轮播间隔interval，当页面没被激活（用户没在浏览当前页面）时，自动暂停，重新浏览当前页面（被激活）时，自动轮播

<template>
  <div class="m-slider" @mouseenter="onStop" @mouseleave="onStart">
    <div class="m-panel" ref="slider" :style="`width: ${width}px;`">
      <div
        v-for="(item, index) in imageData"
        :key="index"
        class="m-image">
        <img :src="item.src" :alt="item.title"/>
        <p class="u-img-title" :title="item.title">{{ item.title }}</p>
      </div>
      <div class="m-image">
        <img :src="imageData[0].src" :alt="imageData[0].title"/>
        <p class="u-img-title" :title="imageData[0].title">{{ imageData[0].title }}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ImageSlider',
  props: {
    imageData: { // 图片数组
      type: Array,
      default: () => {
        return []
      }
    },
    interval: { // 滑动轮播间隔
      type: Number,
      default: 3000
    }
  },
  data () {
    return {
      visibilityChangeEvent: '',
      timer: null,
      imgWidth: 400, // 图片宽度，用于生成容器宽度
      activeIndex: 0 // 当前展示的图片
    }
  },
  computed: {
    width () {
      return (this.imageData.length + 1) * this.imgWidth
    }
  },
  created () {
    var hiddenProperty = 'hidden' in document ? 'hidden'
      : 'webkitHidden' in document ? 'webkitHidden'
        : 'mozHidden' in document ? 'mozHidden'
          : null
    this.visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange')
    var onVisibilityChange = () => {
      if (!document[hiddenProperty]) {
        this.onStart()
        console.log('页面激活')
      } else {
        this.onStop()
        console.log('页面非激活')
      }
    }
    document.addEventListener(this.visibilityChangeEvent, onVisibilityChange)
    setTimeout(() => {
      this.timer = setInterval(() => { // 自动切换
        this.onMove()
      }, this.interval)
    }, this.interval)
  },
  methods: {
    // 滑动动画效果
    slideEffect (target) {
      const offsetLeft = this.$refs.slider.offsetLeft // 求出元素的当前偏移位置
      let step = (target - offsetLeft) / 10 // 由快到慢的过渡效果
      step = step > 0 ? Math.ceil(step) : Math.floor(step) // 对每次移动的距离取整，ceil：向上取整，floor：向下取整
      setTimeout(() => {
        if (target !== offsetLeft) {
          this.$refs.slider.style.left = offsetLeft + step + 'px' // 移动
          this.slideEffect(target)
        }
      }, 15) // 每隔15ms执行一次
    },
    onSlider (moveX) {
      const offset = this.$refs.slider.offsetLeft
      const target = offset + moveX // 要移动的目标位置
      this.slideEffect(target)
    },
    onMove () {
      if (this.activeIndex === this.imageData.length - 1) { // 最后一张
        this.activeIndex = 0 // 显示第一张
        this.$refs.slider.style.left = 0
        this.onSlider(-this.imgWidth)
      } else {
        this.activeIndex++ // 显示下一张
        this.onSlider(-this.imgWidth)
      }
    },
    onStop () {
      clearInterval(this.timer)
      this.timer = null
    },
    onStart () {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.onMove()
      }, this.interval)
    },
    beforeDestroy () {
      document.removeEventListener(this.visibilityChangeEvent)
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>
<style lang="less" scoped>
@themeColor: #D93844;
.m-slider {
  margin: 100px auto;
  width: 400px;
  height: 300px;
  overflow: hidden;
  position: relative;
  .m-panel {
    position: absolute;
    top: 0;
    left: 0;
    // width: 1600px; // (图片数组长度+1) * 图片宽度
    height: 300px;
    .m-image {
      float: left;
      width: 400px;
      height: 300px;
      img {
        width: 400px;
        height: 270px;
        cursor: pointer;
      }
      .u-img-title {
        width: 400px;
        font-size: 16px;
        color: #333;
        line-height: 30px;
        overflow: hidden;
        text-align: left;
        cursor: pointer;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        &:hover {
          font-size: 16px;
          color: @themeColor;
        }
      }
    }
  }
}
</style>

②在要使用滑动轮播图片的页面引入使用组件，并传入图片数组

<ImageSlider :imageData="imageData" :interval="3000" />
import ImageSlider from '@/components/ImageSlider'
components: {
    ImageSlider
}
data () {
    return {
      imageData: [
        {
          title: 'image-1,image-1,image-1,image-1,image-1...',
          src: '图片地址'
        },
        {
          title: 'image-2,image-2,image-2,image-2,image-2...',
          src: '图片地址'
        },
        {
          title: 'image-3,image-3,image-3,image-3,image-3...',
          src: '图片地址'
        }
      ]
   }
}

VUE 轮播图自动图片轮播

1024 个赞