当前位置：移动技术网 > IT编程>脚本编程>vue.js > vue无限轮播插件代码实例

vue无限轮播插件代码实例

2019年07月19日 | 移动技术网IT编程 | 我要评论

思路：

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

<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无限轮播插件详解整合，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

vue-cli4安装和打包配置

vue-cli4下载首先打开命令行窗口（window+r，输入cmd）输入vue -V ，如果有旧版本就进行卸... [阅读全文]
VUE的七种动态路由传参

params传参(4种)1.给路由的规则中配置接收参数 { path: '/details/:yaxu'... [阅读全文]
Vue-slot插槽的所有使用方法

1.插槽的基本使用<div id="app"> <cpn><button>... [阅读全文]
session运行机制

什么是session：首先了解一下Session的中文意思：一次会话，什么是一次会话呢？我举个例子：就我们现在上... [阅读全文]
vue中的@click.native.prevent，点击事件加上native.prevent究竟有什么用呢？

在项目发版的总结过程中，突然看到@click.native.prevent，很好奇它的用法，一开始还以为是ele... [阅读全文]
uniapp在微信小程序中使用 ECharts

uniapp使用Echartsuniapp在微信小程序中使用 ECharts可以参照mpvue-echarts进... [阅读全文]
Vue自定义组件和组件传值（父传子、子传父、子传子）

一、Vue自定义组件1、在src中components中,新建Header.vue组件（首字母建议大写）2、He... [阅读全文]
vue+element导出excel并通过xlsx-style修改样式

导入插件npm install --save xlsxnpm install -S file-savernpm... [阅读全文]
$nextTick的使⽤（vue中）

$nextTick的使用首先，vue是非常流行的框架，它结合了angular和react的优点，从而形成了一个轻... [阅读全文]
uniapp-iPhoneX和iPhoneX Max 的底部小黑条挡住底部tab

1、在template.h5.html中添加viewport-fit=cover<meta name="v... [阅读全文]

网友评论


验证码：

vue无限轮播插件代码实例

2019年07月19日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论