超详细——vue.js 实现轮播图、JS实现轮播效果

最新推荐文章于 2024-04-23 10:09:29 发布

啊哈嗯嗯

最新推荐文章于 2024-04-23 10:09:29 发布

阅读量8.3k

点赞数 11

分类专栏：教程

本文链接：https://blog.csdn.net/weixin_44937336/article/details/106748756

版权

教程专栏收录该内容

5 篇文章 1 订阅

订阅专栏

首先看图，是不是你想要的结果（录制动画，把时间调快了）

在这里插入图片描述

代码：（vue.js、图片自己找）

vue官网：https://cn.vuejs.org/v2/guide/installation.html

或：直接引入vue.js：

  	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .img{
      width: 100%;
      height: 100%;
      position: absolute;
    }
    .imgItems{
      position: relative;
      width: 800px;
      height: 400px;
      margin: auto;
    }
    /*圆圈居中水平排列*/
    .imgIndexs{
      display: flex;
      justify-content: space-between;
      position: absolute;
      left: 360px;
      bottom: 5px;
      width: 80px;
    }
    /*图片所对应的圆圈*/
    .imgIndex{
      width: 8px;
      height: 8px;
      border: 1px solid #EEEEEE;
      border-radius: 50%;
      background-color: #EEEEEE;
      z-index: 100;
    }
    /*设置层级，显示图片*/
    .indexZ{
      z-index: 10;
    }
    /*选中对应的圆圈设置背景颜色*/
    .indexBGC{
      background-color: blue;
    }
  </style>
</head>
<body>

  <div id="app">
    <div class="imgItems" @mouseover="mouseOver" @mouseout="mouseOut">
      <img src="img1.png" alt="" class="img indexZ">
      <img src="img2.jpg" alt="" class="img">
      <img src="img3.jpg" alt="" class="img">
      <img src="img4.jpg" alt="" class="img">
      <img src="img5.jpg" alt="" class="img">

      <div class="imgIndexs">
        <div class="imgIndex" v-for="(item,index) in imgCount"
             @mouseover="indexBtn(index)" :class="{indexBGC:currentIndex == index}">
        </div>
      </div>
    </div>
  </div>

  <script src="../vuejs/vue.js"></script>
  <script>
   const app = new Vue({
     el:"#app",
     data:{
       imgCount:0, //图片个数
       currentIndex:0, //当前图片
       intervalID:'', //停止interval的唯一id
     },
     mounted(){
       this.imgCount = document.getElementsByTagName("img").length;
       setTimeout(()=>{
         // 开始播放
         this.startTime();
       },10)
     },
     methods:{
       /**
        * 鼠标移动到图片上
        */
       mouseOver(){
         this.stopTime()
       },
       /**
        * 鼠标移出图片
        */
       mouseOut(){
         this.startTime();
       },
       /**
        * 点击圆圈
        */
       indexBtn(index){
         this.currentIndex = index
         this.selectImg(index);
       },
       /**
        * 选中对应的图片设置层级类
        */
       selectImg(index){
         let imgList = document.getElementsByClassName("img");
         this.clearClass(imgList);
         imgList[index].className = "img indexZ"
       },
       /**
        * 层级复位
        */
       clearClass(array){
         for (let i=0 ; i<array.length ; i++){
           array[i].className = "img"
         }
       },

       /**
        * 开始循环播放图片
        */
       startTime(){
         this.intervalID = window.setInterval(()=>{
           this.currentIndex++;
           if(this.currentIndex > 4){
             this.currentIndex = 0
           }
           this.selectImg(this.currentIndex)
           },1000)
       },
       /**
        * 鼠标移到图片上时停止图片播放
        */
       stopTime(){
         window.clearInterval(this.intervalID)
       }
     }
   })
 </script>

</body>
</html>

啊哈嗯嗯

关注

11
点赞
踩
41

收藏

觉得还不错? 一键收藏
3
评论
超详细——vue.js 实现轮播图、JS实现轮播效果

首先看图，是不是你想要的结果（录制动画，把时间调快了）代码：（vue.js、图片自己找）vue官网：https://cn.vuejs.org/v2/guide/installation.html或：直接引入vue.js： <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!DOCTYPE html><html lang="en"><head&
复制链接

扫一扫