vue无限轮播插件代码实例


Posted in Javascript onMay 10, 2019

思路:

要实现无限轮播,需要在轮播图前后各加一张图片,加在前面的是轮播图的最后一张图片(重复的),加在后面的是轮播图的第一张图片(重复的)。例:

<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来控制滑动,当顺向到达alt为4的图片时,下一张滑到第六张图片,alt为1,同时改变index为1.然后立即将left移到第二张图片,alt为1那张。这样就不会被察觉

好了,贴代码

<!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,//因为到最后一张图片,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()
      }
    })
  </script>
  </body>
</html>

以上所述是小编给大家介绍的vue无限轮播插件详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
javascript Base类 包含基本的方法
Jul 22 Javascript
Javascript 中的类和闭包
Jan 08 Javascript
jquery 笔记 事件
Nov 02 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
Javascript中typeof 用法小结
May 12 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
js中的深浅拷贝问题简析
May 10 #Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 #Javascript
详解jQuery如何实现模糊搜索
May 10 #jQuery
JS匿名函数内部this指向问题详析
May 10 #Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 #Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 #Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 #Javascript
You might like
dedecms模板标签代码官方参考
2007/03/17 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
Python实现一个优先级队列的方法
2020/07/31 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
super()与this()的区别
2016/01/17 面试题
英文自荐信
2013/12/19 职场文书
学校课外活动总结
2014/05/08 职场文书
品牌推广策划方案
2014/05/28 职场文书
七一建党节慰问信
2015/02/14 职场文书
小学感恩主题班会
2015/08/12 职场文书
公开致歉信
2019/06/24 职场文书
python中%格式表达式实例用法
2021/06/18 Python
关于的python五子棋的算法
2022/05/02 Python
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers