用Vue实现一个简单的图片轮播 (3)

main.js

1// The Vue build version to load with the `import` command
2// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3import Vue from \'vue\'
4import "./assets/css/reset.css"
5import "./assets/css/global.css"
6import router from \'./router\'
7import store from "./store/index"
8import Vuex from "vuex"
9Vue.use(Vuex)
10Vue.config.productionTip = false
11
12/* eslint-disable no-new */
13new Vue({
14  el: \'#app\',
15  router,
16  store,
17  components: {},
18  template: \'\'
19})

2、在components/slider文件夹下新建Slider.vue和sliderIndex.vue这两个组件

Slider.vue

1<template>
2    <div class="banner-container">
3      <ul class="images">
4        <li><a href=""><img src="../../assets/img/banner/banner1.jpeg" alt=""></a></li>
5        <li><a href=""><img src="../../assets/img/banner/banner2.jpeg" alt=""></a></li>
6        <li><a href=""><img src="../../assets/img/banner/banner3.jpeg" alt=""></a></li>
7      </ul>
8      <ul class="dots">
9        <li class="active"></li>
10        <li></li>
11        <li></li>
12      </ul>
13    </div>
14</template>
15
16<script>
17    export default {
18        name: "Slider",
19    }
20</script>
21
22<style scoped>
23  /* 样式 */
24  .banner-container {
25    height: 350px;
26    position: relative;
27    overflow: hidden;
28  }
29  .banner-container li {
30    display: block;
31    width: 1080px;
32    height: 100%;
33    float: left;
34  }
35  .images {
36    height: 100%;
37    transition: 0.5s;
38  }
39  .banner-container img {
40    width: 1080px;
41    height: 100%;
42  }
43  .dots {
44    position: absolute;
45    bottom: 10px;
46    right: 10px;
47    display: flex;
48  }
49  .dots li {
50    width: 10px;
51    cursor: pointer;
52    height: 10px;
53    margin: 0 3px;
54    border-radius: 50%;
55    border: 1px solid;
56    color: #fff;
57  }
58  .dots li.active {
59    background: #fff;
60  }
61</style>