輪播圖基本上在各大網(wǎng)站都能看見,頁面比較美觀，性能交互好，接下來我們來看代碼。

效果圖。

一，原理

在輪播圖數(shù)組imagesUrl中，通過定義一個變量索引展示對應(yīng)的圖片，通過點擊上一張，下一張改變索引進行圖片展示切換。

二，首先來看頁面布局

 <div id="app">
        <div class="view">
            <div :class="{banner:true,trans:flag}"  @mouseenter="enter" @mouseleave="leave">
                <img  :src="imagesUrl[imgindex]" alt="" class="img">
            </div>
            <ul >  
                <li v-for='(item,index) in 5' @click='select(index)' :class='{con:index==sl}'></li>
             <!-- 點擊小圓點切換對應(yīng)圖片展示 -->
            </ul>
            <button @click="prev" class="prev">上一張</button>
            <button @click="next" class="next">下一張</button>
        </div>
    </div>

三,定義變量

        imgindex:'0',//控制變量，默認顯示第一張
        imagesUrl:["images/1.png","images/2.png","images/3.png","images/4.png","images/5.png"],
        flag:true,
        timer：null，//定時器

四, 點擊上一張下一張切換

methods:{
       //下一張
      next:function(){
          if(this.imgindex==this.imagesUrl.length-1){
              this.imgindex=0;
          }else{
              this.imgindex++;
          }
      },
      //上一張
      prev:function(){
          if(this.imgindex<0){
              this.imgindex=this.imagesUrl.length-1
          }else{
              this.imgindex--
          }
      }
  
  }

五，點擊小圓點切換

methods:{
        select(index){
            this.imgindex=index；
      //通過點擊小圓點獲取對應(yīng)的索引，進行賦值；
        },
    }

六，加定時器自動切換

  //
 created() {
        this.timer=setInterval(this.next.bind(this),2000)
      //還可以使用箭頭函數(shù)就不用bind
        this.timer=serInterval(()=>{
        this.next()
        },2000)
    },

7,鼠標經(jīng)過圖片清除定時器，

   methods:{
           // 鼠標移入view
           enter:function(){
            clearInterval(this.timer);
        },
            leave:function(){
            this.timer=setInterval(this.next.bind(this),3000)
        }
    }

8，樣式

   <style>
        /* .banner img{
            float:left
        } */
        .img{
            float:left  
        }
        .banner{
            overflow: hidden;
        }
        .trans{
            transition:all .5s
        }
        .view{
            width: 480px;
            height: 302px;
            border:8px solid orangered;
            overflow: hidden;
            position: relative;
        }
        ul{
            width: 300px;
            height: 50px;
            position: absolute;
            bottom: 0;
            left: 90px;
        }
        ul li{
            width: 30px;
            height: 30px;
            list-style: none;
            border-radius: 50%;
            float: left;
            background: #ffffff;
        }
        .con{
            background: red;
        }
        .prev{
         position: absolute;
         top: 50%;
         left: 0;   
        }
        .next{
         position: absolute;
         top: 50%;
         right: 0;   
        }
    </style>

這樣我們就完成了一個全面的輪播圖!!!