vue中展示多张小图轮播每几秒走一张，支持左右点击

标签：vue 轮播 regional 382 height 张小图 leftNum services display

html部分

       <div class="regional-services-list" style="overflow: hidden;" @mouseenter="stopCar()" @mouseleave="starCar()">           <div class="preIcon" @click="preChange()"> <i class="el-icon-arrow-left"></i> </div>           <div class="nextIcon" @click="nextChange()"> <i class="el-icon-arrow-right"></i> </div>           <div style="overflow: hidden;display: inline-block;height: 146px;">         <ul class="qflb" :style="{'left':leftNum+'px'}" :class="{'transition':isTransition}">           <li             v-for="(item, index) in regionalServicesList"             :key="index"             class="regional-services-item"             @click="toBlogrollUrl(item)"           >           <a               class="regional-services-link"                href="javascript:;"             >               <img class="regional-services-img" :src="item.imgpath" alt="" />             </a>                     </li>           <li             v-for="(ele, i) in regionalServicesList"             :key="i+6"             class="regional-services-item"             @click="toBlogrollUrl(ele)"           >           <a               class="regional-services-link"                href="javascript:;"             >               <img class="regional-services-img" :src="ele.imgpath" alt="" />             </a>                     </li>         </ul>       </div>       </div> css部分：   .regional-services-list{       background: #fff;       box-sizing: border-box;       padding: 51px 52px  51px 54px;       box-shadow: 0px 0px 20px rgba(38,118,168,8%);       border-radius: 8px;       position: relative;       &:hover{         .preIcon,.nextIcon{           display: block;         }       }   }   .preIcon,.nextIcon{     width: 36px;     height: 36px;     border-radius: 20px;     text-align: center;     line-height: 36px;     position: absolute;     display: none;     font-size: 16px;     background-color: rgba(0, 0, 0, 0.1);     cursor: pointer;     z-index: 99;     color: #fff;     top: 50%;     font-weight: bold;     transform: translateY(-50%);     &:hover{       background-color: rgba(0, 0, 0, 0.2);     }   }   .preIcon{     left: 10px;       }   .nextIcon{     right: 10px;   }   .regional-services-item{       width: 330px;       height: 128px;       display: inline-block;       margin-right: 52px;       vertical-align: top;       &:last-child{         margin-right: 0;       }   }   .regional-services-link{      display: block;   }   .regional-services-img{     width: 100%;     height: 100%;     cursor: pointer;   }   .regional-services-head{     margin-bottom: 40px;       } js部分：   created() {     this.starCar(); }，   destroyed(){     this.stopCar();   }, methods:{  starCar(){       this.iconTime = setInterval(()=>{       this.leftNum -=382;       if (this.leftNum<=-382*(this.regionalServicesList.length+1)) {         this.isTransition = false;         this.leftNum = 0;       }else{         this.isTransition = true;       }     },3000)     },     stopCar(){       clearInterval(this.iconTime);     },     nextChange(){       if (this.leftNum<=-382*(this.regionalServicesList.length)) {       this.isTransition = false;       this.leftNum = 0;       setTimeout(()=>{         this.isTransition = true;       this.leftNum -=382;       })     }else{       this.isTransition = true;       this.leftNum -=382;     }     },     preChange(){       if (this.leftNum<0) {         this.isTransition = true;         this.leftNum +=382;       }else{       this.isTransition = false;       this.leftNum=-382*(this.regionalServicesList.length)       setTimeout(()=>{         this.isTransition = true;         this.leftNum +=382;       })     }     }, }

标签：vue,轮播,regional,382,height,张小图,leftNum,services,display
From： https://www.cnblogs.com/xiao-lei-ge/p/17602509.html