vue无限轮播插件代码实例

2024-07-31 12:29:37

思路：

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

<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轮播图插件vue-awesome-swiper

Vue-Awesome-Swiper 轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,SPA和SSR. 例子例子安装设置安装Install vue-awesome-swiper npm install vue-awesome-swiper --save vue挂载 // import import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // or require var
vue轮播图插件vue-awesome-swiper的使用代码实例

最近写vue2.0项目中用到了轮播图的一个插件,也就是vue-awesome-swiper,个人感觉还是比较强大的,swiper官网中的API及配置均可使用(支持3.0),以下说下使用该插件的一些步骤: 第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesom
vue中引用swiper轮播插件的教程详解

有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div
vue轮播图插件vue-concise-slider的使用

vue-concise-slider vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端版本 v2.4.7支持vue2.0+ 特点简单配置轻量 (~24kB gzipped) 多种滑动样式目前已实现全屏自适应移动端兼容垂直滚动定时自动切换不定宽度滚动无缝循环滚动多级滚动渐变滚动旋转滚动 page中加入自定义组件未来将实现渐变滚动视差效果链接文档 demo 安装 npm install vue
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能

VueSliderShow故名思意,vue的轮播图组件插件,该插件: 1.支持浏览器任意放缩,兼容移动端, 2.支持自动切换,鼠标经过停止切换,分页/任意页点击切换,左右切换, 3.支持文字介绍(超过一行自动省略) 本文讲述的是从开发一款基于Vue2x的响应式自适应轮播组件插件的一个全过程,包含发布到npm,构建自己的npm包,供下载安装使用的技巧,阅读本文需要些Vue的语法糖(自定义标签.计算属性.父子组件通信等),以及ES6.npm等基础知识.先来看下Demo 示例源码地址 Install
vue无限轮播插件代码实例

思路: 要实现无限轮播,需要在轮播图前后各加一张图片,加在前面的是轮播图的最后一张图片(重复的),加在后面的是轮播图的第一张图片(重复的).例: <div class="wrapper-content"> <img class="wrapper-content_img" alt="4" src="img/4.jpg"/> <img class="wrapper-content_img&q
swiper 自动图片无限轮播实现代码

完整代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper/css/swiper-3.4.2.min.css" rel="external nof
Vue + ts实现轮播插件的示例

背景最近在学习 ts,打算用 ts 写一个练手项目,参照的网站内容是 wanandroid,这个接触过android开发的同学可能更i了解一些,其实一开始是打算后台全部都自己写的,不过奈何一个懒字,所以现在的打算就是自己实现登录注册简单的逻辑.这些都不重要,一开始实现轮播是打算在 vue 中引入轮播图 swiper.js,后来想想还是自己写算了.也当作熟悉 ts.先上效果图(这里没有动态图片,各位同学可以自己实现) 代码已经上传 git,进度比较慢,如果可以各位大佬点个 star. githu
jQuery图片轮播插件——前端开发必看

还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢.后来慢慢的接触多了,觉得这些也是so easy的嘛,于是为了加深对js.jQuery的理解以及探究网站上各种效果的实现方法,就有了jQuery插件之路这样一个系列,当然为了纪念当初对轮播的执念,于是就从轮播开始写了一个小小的插件,这只是一个开始,随着后面的了解的更多,也会写一些更加绚丽的DEMO.有兴趣的朋友可以去看
Bootstrap轮播插件简单使用方法介绍

本文细致的为大家分享了Bootstrap轮播插件简单实例,供大家参考,具体内容如下使用Bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入效果图: bootstrap.min.js. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-轮播导航 --&
vue.js层叠轮播效果的实例代码

最近写公司项目有涉及到轮播banner,一般的ui框架无法满足产品需求:所以自己写了一个层叠式轮播组件:现在分享给大家: 主要技术栈是vue.js ;javascript;jquery:确定实现思路因工作繁忙,暂时不做梳理了:直接贴代码参考: 此组件是基于jquer封装,在vue项目中使用首先需要先安装jquery插件:指令:npm install jquery,安装完成之后再webpack.base.conf.js配置插件: plugins: [ new webpack.ProvidePlug
Vue.js轮播图走马灯代码实例（全）

话不多说先上效果图,本文引荐链接https://www.jb51.net/article/129112.htm 这个是html, <template> <div> <div class="back_add"> <div class="threeImg"> <div class="Containt"> <div class="iconleft" @click=&q
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he
Android图片无限轮播的实现代码

本文实例为大家分享了AnAndroid图片无限轮播的具体代码,供大家参考,具体内容如下 public class MainActivity extends Activity { private ViewPager viewPager; private LinearLayout ll_dot; private String[] imageUrls = new String[] { "http://pic8.nipic.com/20100701/5290458_114840036316_2.jpg&

vue无限轮播插件代码实例

相关推荐

随机推荐