Tel：028-86922220 我有需求

vue中怎么实现一个无限轮播插件

这篇文章给大家介绍vue中怎么实现一个无限轮播插件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

成都创新互联公司是专业的雨城网站建设公司，雨城接单;提供网站建设、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行雨城网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

思路：

要实现无限轮播，需要在轮播图前后各加一张图片，加在前面的是轮播图的最后一张图片（重复的），加在后面的是轮播图的第一张图片（重复的）。例：


      
      
      
      
      
      
 

然后再用left来控制滑动，当顺向到达alt为4的图片时，下一张滑到第六张图片，alt为1，同时改变index为1.然后立即将left移到第二张图片，alt为1那张。这样就不会被察觉

好了，贴代码



  
    
    
  
  
   
    
      
        
        
        
        
        
        
      
                                                 
      <       >           aaa           new Vue({       el:'#app',       data:{         originalData:{           img_width:350,           img_height:350,           btn_width:40,           btn_height:40,           num:4,           delay:300         },         isTrans:true,//因为到最后一张图片，index为1时，需要立即跳到第二张index也为1的图片，这个用来是否给出transition         index:1,         timer:null,//setInterval         clickdelay:false//用来防止连续点击       },       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 //当到达最后一张图片时              }             if(left>-100){               self.isTrans=false               node.style.left=-self.originalData.num*self.originalData.img_width+'px'               self.clickdelay=false //当到达第一张图片时              }           },this.originalData.delay)         },         play(){           var self=this;           this.timer=setInterval(function(){             self.next()           },2000)         },         stop(){           this.clickdelay=false//用来防止连续点击           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(){         /*下面是判断过渡动画是否完成*/          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()       }     })      

关于vue中怎么实现一个无限轮播插件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


分享标题：vue中怎么实现一个无限轮播插件
标题URL：http://bzwzjz.com/article/iehipi.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接： 成都网站建设公司 成都品牌网站设计 成都网站制作 成都网站建设 宜宾网站设计 专业网站设计 成都网站建设 成都网站建设 成都网站制作 成都网站建设流程 成都网站设计 成都网站建设公司 成都做网站建设公司 达州网站设计 定制网站设计 手机网站建设套餐 网站设计制作报价 四川成都网站建设 阿坝网站设计 成都网站制作 手机网站制作 成都网站设计 

    • 微信扫一扫在线咨询