vue如何实现无缝轮播图

目录 vue实现无缝轮播图 轮播图的思路 无缝轮播（跑马灯效果）

vue实现无缝轮播图

轮播图的思路

一组图片进行不停地循环,如果循环到最后一张图片,就从第一张开始,不停循环,我们可以设置图片切换的时间.

1.首先我们先把我们需要用到的数据以数组的方式定义在data中,再定义一个当前显示在页面的图片的值,默认为0. 

? data() {
? ? return {
? ? ? v:0,
? ? ? imglist:[
? ? ? ? {"id":0,img:"/pics/picture1.jpg"},
? ? ? ? {"id":1,img:"/pics/picture3.jpg"},
? ? ? ? {"id":2,img:"/pics/picture4.jpg"},
? ? ? ]
? ? }
? },

2.我们将定义的数据渲染到页面中,v-show使用三目判断定义的值和下标是否相等,如果相等值就为true(显示),否则值为false(隐藏)

? <div class="imgbox">
? ? <img :src="item.img" alt="" v-for="(item, index) in imglist" :key="index" v-show="v==index?true:false">
? </div>

3.下一步要让轮播图运行起来,created()这是生命周期中的一个属性,他的作用是在项目启动的时候实现函数自执行. 先设置一个定时器,设置两秒,就是图片每两秒切换一次,然后做判断,如果定义的值大于图片数字的长度减1,那么就让值=0,从第一张开始,否则,就让图片一直++,不断递增,实现轮播图的效果.

? created(){
? ? setInterval(() => {
? ? ? ? if(this.v>=2){
? ? ? ? ? ? this.v=0
? ? ? ? }
? ? ? ? else{
? ? ? ? ? this.v++
? ? ? ? }
? ? }, 2000);
? }

无缝轮播（跑马灯效果）

1.首先创建两个vue组件Sweiper.vue和SweiperItem.vue;

2.将两个组件引入页面，Sweiper.vue中用v-model传参（v-model 其实是语法糖，默认属性value和默认事件input）；代码中我是通过v-model的selcted将值传给Sweiper（子组件），自动轮播时子组件再通过触发input事件将即将显示的值传回给父组件

3.核心是要让selected的值传到SweiperItem中，与SweiperItem中的name值相等判该显示哪张图片； 

<template>
  <div>
    <Sweiper v-model="selected">
      <!--v-model是个语法糖，相当于value和input事件-->
      <Sweiper-item  name="item1">
        <div class="item">
          <img :src="getImg('01')" alt="">
        </div>
      </Sweiper-item>
      <Sweiper-item name="item2">
        <div class="item">
          <img :src="getImg('02')" alt="">
        </div>
      </Sweiper-item>
      <Sweiper-item name="item3">
        <div class="item">
          <img :src="getImg('03')" alt="">
        </div>
      </Sweiper-item>
    </Sweiper>
  </div>
</template>

这里的图片没有通过数组用v-for循环，方便大家看其结构形式

<script>
? import Sweiper from "components/Sweiper.vue";
? import SweiperItem from "components/SweiperItem.vue";
? export default {
? ? name: "mySweiper",
? ? components: {
? ? ? Sweiper,
? ? ? SweiperItem
? ? },
? ? data() {
? ? ? return {
? ? ? ? selected: "item1",//默认第一张
? ? ? }
? ? },
? ? methods:{
? ? ? getImg(url){
? ? ? ? return "img/"+url+".jpg"
? ? ? },
? ? },
? ? mounted(){
? ? ? /*setInterval(()=>{
? ? ? ?this.selected="item2"
? },3000)
? 此时因为mounted只执行一次，所以还是不变，需要在Sweiper写一个watch监听
? ? }*/这一步注释是因为换到Sweiper组件中写了
? }
</script>

<style >
? .item{
? ? /*border: 1px solid black;*/
? }
? .item>img{
? ? width: 100%;
? ? /*height: 0.1rem;*/
? }
</style>

Sweiper.vue

<template>
  <div class="Sweiper">
    <slot></slot>
  </div>
</template>

<script>
? export default {
? ? name: "Sweiper",
? ? data() {
? ? ? return{
? ? ? ? current:''
? ? ? }
? ? },
? ? props:{
? ? ? value:{
? ? ? ? type:String,
? ? ? ? default:""
? ? ? },
? ? },
? ? mounted(){
? ? ? //自动轮播时查找name值用indexOf的方法遍历出当前轮播的下表
? ? ? this.names=this.$children.map(child=>{
? ? ? ?return child.name
? ? ? });
? ? ? this. showImg();
? ? ? this. paly()
? ? },
? ? methods:{
? ? ? showImg(){
? ? ? ? this.current=this.value||this.$children[0].name;
? ? ? ? //当前实例的直接子组件
? ? ? ? this.$children.map(vm=>{
? ? ? ? ? vm.selected=this.current
? ? ? ? })
? ? ? },
? ? ? paly(){
? ? ? ? //每次轮播把图片做调整
? ? ? ? this.timer=setInterval(()=>{
? ? ? ? ? //indexOf返回某个指定字符串首次出现的位置
? ? ? ? ? const index=this.names.indexOf(this.current);
? ? ? ? ? let newIndex=index+1;
? ? ? ? ? //严谨一点
? ? ? ? ? if (newIndex===this.names.length){
? ? ? ? ? ? ?newIndex=0;
? ? ? ? ? }
? ? ? ? ? this.$emit("input",this.names[newIndex])
? ? ? ? },3000)
? ? ? }
? ? },
? ? watch:{
? ? ? //监听value值，发生变化就改变selected
? ? ? value(){
? ? ? ? this. showImg()
? ? ? }
? ? },
? ? beforeDestroy() {
? ? ? //实列销毁前
? ? ? clearInterval(this.timer)
? ? }
? };
</script>

<style>
? .Sweiper{
? ? /*border: 1px solid black;*/
? ? width: 100%;
? ? height: 4rem;
? ? overflow: hidden;
? ? margin: 0 auto;
? ? position: relative;
? }
</style>

SweiperItem.vue

<template>
? <transition>
? ? <div class="Sweiper-item" v-show="isShow">
? ? ? <slot></slot>
? ? </div>
? </transition>
</template>

<script>
? export ?default {
? ? name:"SweiperItem",
? ? data(){
? ? ? return{
? ? ? ? selected:""
? ? ? }
? ? },
? ? props:{
? ? ? name:{
? ? ? ? type:String,
? ? ? ? required:true
? ? ? },
? ? },
? ? mounted(){
? ? },
? ? computed:{
? ? ? isShow(){
? ? ? ? return this.selected===this.name;
? ? ? }
? ? }
? };
</script>

<style>
? .v-enter-active,.v-leave-active{
? ? transition: all 1s linear;
? }
? .v-leave-to{
? ? transform:translate(-100%);
? }
? .v-enter{
? ? transform: translate(100%);
? }
? .v-enter-active{
? ? position: absolute;
? ? top:0;
? ? left: 0;
? }
</style>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于vue如何实现无缝轮播图的详细内容...