vue实现轮播图组件

轮播图基本上在各大网站都能看见,页面比较美观，性能交互好，接下来我们来看代码。

效果图。

一，原理

在轮播图数组imagesUrl中，通过定义一个变量索引展示对应的图片，通过点击上一张，下一张改变索引进行图片展示切换。

二，首先来看页面布局

 

        

            

                
            
            
  
                

             
            
            上一张
            下一张
        
    

三,定义变量

        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；
      //通过点击小圆点获取对应的索引，进行赋值；
        },
    }

六，加定时器自动切换

  //
 created() {
        this.timer=setInterval(this.next.bind(this),2000)
      //还可以使用箭头函数就不用bind
        this.timer=serInterval(()=>{
        this.next()
        },2000)
    },

7,鼠标经过图片清除定时器，

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

8，样式

这样我们就完成了一个全面的轮播图!!!