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 相关文章推荐
在html页面中包含共享页面的方法
Oct 24 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php缓冲输出实例分析
2015/01/05 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
php简单生成随机数的方法
2015/07/30 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
javascript使用prototype完成单继承
2014/12/24 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
Python动态加载模块的3种方法
2014/11/22 Python
python通过shutil实现快速文件复制的方法
2015/03/14 Python
浅谈Python的文件类型
2016/05/30 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
python版百度语音识别功能
2019/07/09 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
小学教师师德承诺书
2014/05/23 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
寻找成龙观后感
2015/06/12 职场文书
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS