vue读取文件夹的图片（初级篇）并自动轮播

手动轮播图片主要用到bootstrap4组件的轮播。
index.html中标签引用如下：

template模块代码如下：

      
   //data-interval设置时间间隔
        
        

          

          

          

        
        
        

           

            
            
          

            
          
 
          

            
          
 
        
        
        
          
        
        
          
        
      

读取文件夹中的图片并用for循环遍历自动轮播（emm目前我的需求中图片较少，没学到能自动获取文件夹的图片，只到把文件夹的图片路径全摆在代码中）

template模块：

    
  //区别在于加上了data-ride="carousel"有自动轮播效果
        
        

           

            
           
           

             
           
        
     

script模块
引用如下：

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../node_modules/bootstrap/dist/js/bootstrap.min.js'

export default{}内的data（）内要放图片列表Highlightlist路径

 data () {
    return {
      Highlightlist: [
        {img: require(' ')},
        {img: require(' ')},
        {img: require(' ')},
        {img: require(' ')},
        {img: require(' ')}
      ],
      currentIndex: 0
    }
  }

如果想要图片轮播速度慢一点（不是时间间隔），可在style模块对图片的所在的类选择器进行调整。

.carousel-item{
  -webkit-transition: -webkit-transform 5s ease-in-out;
  -o-transition: -o-transform 5s ease-in-out;
  transition: transform 5s ease-in-out;
} 

参考文章：
https://www.runoob.com/bootstrap4/bootstrap4-carousel.html
还有一些参考过的文章一时半会找不到了[捂脸]