vue实现轮播效果

效果如下：（不好意思，图有点大；）

功能：点击左侧图片，右侧出现相应的图片；同时左侧边框变颜色。

 代码如下：（也可以直接下载文件）

  
  
  



  

    
    

      
for="(leftImg,index) in leftImgs" :key = "index">
        {{ index + 1 }}
        

          
          
        
      
    
    
    


    
    
for="(leftImg,index) in leftImgs" :key="index + 'C'">
      
    
  

  

  

 如果左侧不是图片，而是文字的话；

可以把

 /* width: 130px;
      height: 130px;
      line-height: 130px; */
这三行代码取消。

另外，如果出现下面这样的报错的话：

 是因为key的值重复了。所以，只需要把key的值改下就可以了：

例：

这里例子中的 I,II 字符可以替换成你自己定义的任意字符，只是为了保证key的唯一性

如果图片加载不出来，尝试一下