vue轮播图

最新推荐文章于 2025-01-04 09:06:03 发布

原创最新推荐文章于 2025-01-04 09:06:03 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #transition #this.$refs #轮播图

vue 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了使用Vue.js实现轮播图的两种方法：直接操作DOM和利用transition组件实现平滑过渡。通过实例代码展示了如何控制图片切换的定时器，以及在鼠标悬停时暂停自动播放的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.利用js的this.$refs拿到dom进行操作

<template>
  <div id="slider">
    <div class="window">  
      <ul class="container" ref="container" v-if="true" @mouseout="play" @mouseover="clear">  
          <li v-for="(item, index) in sliders" :key="index">
            <img :src="item.img" alt="">
          </li>
      </ul>
      <ul @mouseout="play" @mouseover="clear">
        <li v-for="(item, index) in sliders"  @click = slideClick(index)>{{index+1}}</li>
      </ul>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'slider',
  data () {
    return {
      sliders:[
        {
          img: require('@/assets/img/normal1.jpg')
        },
        {
          img: require('@/assets/img/normal2.jpg')
        },
        {
          img: require('@/assets/img/normal3.jpg')
        },
        {
          img: require('@/assets/img/normal4.jpg')
        }
      ],
      currentIndex: 0,
    }
  },
  mounted() {
    this.play()
  },
  methods: {
    jump(i) {
      this.$refs.container.style.marginLeft = -100*(i)+'%';
    },
    slideClick(i) {
      this.clear()
      this.jump(i)
    },
    play() {
      this.runIn = setInterval(()=>{
        this.currentIndex++
        if(this.currentIndex == 3) {
          this.currentIndex = 0
        }
        this.jump(this.currentIndex)
      },1000)
    },
    clear() {
      clearInterval(this.runIn)
    }
  }
}
</script>
<style scoped lang="stylus">
.container{
  width: 400%;
  overflow: hidden;
}
.container li {
  float: left;
  width: 25%; 
  height: 33vw;
}
.container li img{
  width: 100%; 
}
.container+ul li{
  width: 30px;
  padding: 20px;
  float: left;
}
</style>

易于理解,但是没有过渡效果

2.利用transition实现过渡效果

<template>
  <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
    <ul class="slide-img">
      <li>
        <transition name="slide">
          <img v-if="isShow" :src="slides[nowIndex].src">
        </transition>
        <transition name="slide-old">
          <img v-if="!isShow" :src="slides[nowIndex].src">
        </transition>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      nowIndex: 0,
      isShow: true,
      slides:[
        {
          src: require('@/assets/img/normal1.jpg')
        },
        {
          src: require('@/assets/img/normal2.jpg')
        },
        {
          src: require('@/assets/img/normal3.jpg')
        },
        {
          src: require('@/assets/img/normal4.jpg')
        }
      ]
    }
  },
  computed: {
    prevIndex () {//当下标是第0个,前一个就是最后一个
      if (this.nowIndex === 0) {
        return this.slides.length - 1
      }
      else {
        return this.nowIndex - 1
      } 
    },
    nextIndex () {//当前下标是最后一个,后一个下标就是第0个
      if (this.nowIndex === this.slides.length - 1) {
        return 0
      }
      else {
        return this.nowIndex + 1
      }
    }
  },
  methods: {
    goto (index) {
      this.isShow = false
      setTimeout(() => {
        this.isShow = true
        this.nowIndex = index
      }, 15)
    },
    runInv () {
      this.invId = setInterval(() => {
        this.goto(this.nextIndex)
      }, 1000)
    },
    clearInv () {
      clearInterval(this.invId)
    }
  },
  mounted () {
    this.runInv();
  }
}
</script>

<style scoped>
.slide-enter-active {
  transition: all .5s;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-old-leave-active {
  transition: all .5s;
  transform: translateX(-100%);
}
.slide-show {
  position: relative;
  width: 100%;
  height: 30vw;
  overflow: hidden;
}

.slide-img img {
  width: 100%;
  position: absolute;
  top: 0;
}
</style>