思路：
要實(shí)現(xiàn)無限輪播，需要在輪播圖前后各加一張圖片，加在前面的是輪播圖的最后一張圖片（重復(fù)的），加在后面的是輪播圖的第一張圖片（重復(fù)的）。例：
<div class="wrapper-content"> <img class="wrapper-content_img" alt="4" src="img/4.jpg"/> <img class="wrapper-content_img" alt="1" src="img/1.jpg"/> <img class="wrapper-content_img" alt="2" src="img/2.jpg"/> <img class="wrapper-content_img" alt="3" src="img/3.jpg" /> <img class="wrapper-content_img" alt="4" src="img/4.jpg" /> <img class="wrapper-content_img" alt="1" src="img/1.jpg" /> </div>
然后再用left來控制滑動(dòng)，當(dāng)順向到達(dá)alt為4的圖片時(shí)，下一張滑到第六張圖片，alt為1，同時(shí)改變index為1.然后立即將left移到第二張圖片，alt為1那張。這樣就不會(huì)被察覺
好了，貼代碼
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> *{margin: 0;padding: 0} .wrapper{position: relative;overflow: hidden;} .wrapper-content{position: absolute;left: 0;z-index: 1;} .wrapper-content_img{border: none;outline:none;float: left} .wrapper-buttons{position: absolute;width: 100px;height: 20px;text-align: center;bottom: 3px;z-index: 2;} .wrapper-button{float: left;width: 20px;height: 20px;border-radius: 10px;background: gray;margin: 0 2.5px;cursor: pointer;} .wrapper-arrow{position: absolute;width: 40px;height:40px;cursor: pointer;background-color: RGBA(0,0,0,.3); color: #fff;display: none;top:50%;line-height: 40px;font-size: 36px;text-align: center;z-index: 2;} .wrapper:hover .wrapper-arrow{display: block;background-color: rgba(0,0,0,.7);} .wrapper-prev{left:10px;} .wrapper-next{right:10px;} .wrapper_on{background-color: yellow} .wrapper_trans{transition: left .3s ease} </style> </head> <body> <div id="app"> <div class="wrapper" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}" @mouseover="stop" @mouseout="play"> <div class="wrapper-content" :class="{wrapper_trans:isTrans}" :style="{width:originalData.img_width*(originalData.num+2)+'px',height:originalData.img_height+'px',left:-originalData.img_width+'px'}" ref="wrapperContent"> <img class="wrapper-content_img" alt="4" src="img/4.jpg" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/> <img class="wrapper-content_img" alt="1" src="img/1.jpg" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/> <img class="wrapper-content_img" alt="2" src="img/2.jpg" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/> <img class="wrapper-content_img" alt="3" src="img/3.jpg" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/> <img class="wrapper-content_img" alt="4" src="img/4.jpg" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/> <img class="wrapper-content_img" alt="1" src="img/1.jpg" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/> </div> <div class="wrapper-buttons" :style="{left:(originalData.img_width-100)/2+'px'}"> <span :class="['wrapper-button',{'wrapper_on':index==1}]" @click="turnTo(1)"></span> <span :class="['wrapper-button',{'wrapper_on':index==2}]" @click="turnTo(2)"></span> <span :class="['wrapper-button',{'wrapper_on':index==3}]" @click="turnTo(3)"></span> <span :class="['wrapper-button',{'wrapper_on':index==4}]" @click="turnTo(4)"></span> </div> <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="wrapper-arrow wrapper-prev" :style="{marginTop:-originalData.btn_width/2+'px'}" @click="prev"><</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="wrapper-arrow wrapper-next" :style="{marginTop:-originalData.btn_width/2+'px'}" @click="next">></a> </div> </div> <a href="#" rel="external nofollow" style="width: 50px;height: 50px;position: absolute;top: 500px;">aaa</a> <script type="text/javascript" src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app', data:{ originalData:{ img_width:350, img_height:350, btn_width:40, btn_height:40, num:4, delay:300 }, isTrans:true,//因?yàn)榈阶詈笠粡垐D片，index為1時(shí)，需要立即跳到第二張index也為1的圖片，這個(gè)用來是否給出transition index:1, timer:null,//setInterval clickdelay:false//用來防止連續(xù)點(diǎn)擊 }, methods:{ next(){ if(this.clickdelay){ return } this.clickdelay=true if(this.index==this.originalData.num){ this.index=1 }else{ this.index+=1 } this.animate(this.originalData.img_width) }, prev(){ if(this.clickdelay){ return } this.clickdelay=true if(this.index==1){ this.index=this.originalData.num }else{ this.index-=1 } this.animate(-this.originalData.img_width) }, animate(offset){ var node=this.$refs.wrapperContent var self=this; var left=parseInt(node.style.left)-offset this.isTrans=true node.style.left=left+'px' setTimeout(function(){ if(left<-(self.originalData.num*self.originalData.img_width)){ self.isTrans=false node.style.left=-self.originalData.img_width+'px' self.clickdelay=false //當(dāng)?shù)竭_(dá)最后一張圖片時(shí) } if(left>-100){ self.isTrans=false node.style.left=-self.originalData.num*self.originalData.img_width+'px' self.clickdelay=false //當(dāng)?shù)竭_(dá)第一張圖片時(shí) } },this.originalData.delay) }, play(){ var self=this; this.timer=setInterval(function(){ self.next() },2000) }, stop(){ this.clickdelay=false//用來防止連續(xù)點(diǎn)擊 clearInterval(this.timer) this.timer=null }, turnTo(flag){ if(flag==this.index){ return }else{ var offset=(flag-this.index)*this.originalData.img_width this.index=flag this.animate(offset) } } }, mounted(){ /*下面是判斷過渡動(dòng)畫是否完成*/ var node=this.$refs.wrapperContent var transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' } var self=this for(var t in transitions){ if( node.style[t] !== undefined ){ var transitionEvent=transitions[t]; } } transitionEvent && node.addEventListener(transitionEvent, function() { self.clickdelay=false }); this.play() } }) </script> </body></html>以上所述是小編給大家介紹的vue無限輪播插件詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
