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 相关文章推荐
JQuery的$命名冲突详细解析
Dec 28 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 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
php 小乘法表实现代码
2009/07/16 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
用Python实现协同过滤的教程
2015/04/08 Python
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
Python有序字典简单实现方法示例
2017/09/28 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
学生干部的自我评价分享
2014/01/18 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
银行求职自荐信范文
2015/03/04 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS