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