轮播图几种方法

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 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>1</van-swipe-item>

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

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

  <van-swipe-item>4</van-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中使用

• <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中配置

• 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"
          }
        }
     };
  },