轮播图几种方法

1用纯css实现轮播

 

   

   

   

 

样式

#container{

width:1000px;

height:300px;

overflow:hide;

}

#photo{

width:3000px;

height:300px;

animation: switch 5s ease-out infinite

}

img{

float:left;

width:100%;

height:300px;

}

@keyframes switch{

0%,25%{

margin-left:0px;

}

40%,65%{

margin-left:-1000px;

}

75%,100%{

margin-left:-2000px;

}

}

 

2.用vant插件

引入

import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe).use(SwipeItem);

  <van-swipe :autoplay="3000" indicator-color="white">

    <van-swipe-item>1van-swipe-item>

   <van-swipe-item>2van-swipe-item>

   <van-swipe-item>3van-swipe-item>

  <van-swipe-item>4van-swipe-item>

van-swipe>

3.用swiper插件

  全局引入

import Vue from 'vue'
import vueSwiper from 'vue-awesome-swiper' /* 样式的话，我这里有用到分页器，就在全局中引入了样式 */ import 'swiper/dist/css/swiper.css' Vue.use(vueSwiper);

• 在template中使用

• "swiperOption" class="swiper-wrap" ref="mySwiper" v-if="banner.length!=0"> <swiper-slide v-for="(item,index) in banner" :key="index" > <img :src="item.image" alt="" /> swiper-slide>  <div class="swiper-pagination" v-for="(item,index) in banner" :key="index" slot="pagination" >div> swiper>  <div class="number">{{imgIndex}}/{{detailimages.length}}div>

• data中配置

• data() {
      const that = this;
      return {
        imgIndex: 1, swiperOption: { //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true notNextTick: true, //循环 loop: true, //设定初始化时slide的索引 initialSlide: 0, //自动播放 autoplay: { delay: 1500, stopOnLastSlide: false, /* 触摸滑动后是否继续轮播 */ disableOnInteraction: false }, //滑动速度 speed: 800, //滑动方向 direction: "horizontal", //小手掌抓取滑动 grabCursor: true, on: { //滑动之后回调函数 slideChangeTransitionStart: function() { /* realIndex为滚动到当前的slide索引值 */ that.imgIndex= this.realIndex - 1; }, }, //分页器设置 pagination: { el: ".swiper-pagination", clickable: true, type: "bullets" } } }; },

 

 

 

 

转载于:https://www.cnblogs.com/liruting/p/10953029.html