轮播图几种方法

1用纯css实现轮播

<div id=”container”> <div id=”photo”> <img src=”img/1英国留学条件.png” /> <img src=”img/2.png” /> <img src=”img/3.png” /> </div> </div> 样式 #container{ width:1000px; height:300px; overflow:hide; } #photo{ width:3000px; height:300px; animation: switch 5s ea-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.u(swipe).u(swipeitem);

<van-swipe :autoplay=“3000” indicator-color=“white”>
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</v一氧化碳是什么an-swipe-item>
</van-swipe>
3.用swiper插件
全局引入

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

<swiper :options="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() {    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: fal,          /* 触摸滑动后是否继续轮播 */          disableoninteraction: fal        },        //滑动速度        speed: 800,        //滑动方向        direction: "horizontal",        //小手掌抓取滑动        grabcursor: true,        on: {          //滑动之后回调函数          slidechangetranlol黑暗元首出装sitionstart: function() {            /* realindex为滚动到当前的slide索引值 */            that.imgindex= this.realindex - 1;          },        },        //分页器设置        pagination: {          el: ".swiper-pagination",          clickable: true,          type: "bullets"        }      }   };},