Vue组件开发--轮播图的实现

[
{ title: "1", path: require("@/assets/img/1.jpg"), url: "#" },
{ title: "2", path: require("@/assets/img/2.jpg"), url: "#" },
{ title: "3", path: require("@/assets/img/3.jpg"), url: "#" },
{ title: "4", path: require("@/assets/img/4.jpg"), url: "#" },
{ title: "5", path: require("@/assets/img/5.jpg"), url: "#" }
]

知识点：
其中的@符号是Vue中的别名，表示src目录。这是Vue默认配置好的，可以在vue.config.js(使用vue cli 3之前的版本请在webpack.config.js中配置)中配置resolve、alias。

props: {
list: {
type: Array,
required: true,
default() {
return []
}
}
}

知识点：
1.父子组件传值：通过Prop向子组件传递数据。Prop类型可以是一个组数或是一个对象，数组方式无法指定参数的类型。如上面通过对象声明的list参数为例，类型类数组（Array），必传（required），默认值（default）

<style scoped>
.carousel {
display: flex;
overflow: hidden;
position: relative;
margin: 0 auto;
width: 100%;
height: 100%;
}
</style>

<template>
<div class="carousel" :style="sizeStyle">
<div :style="scrollStyle" v-for="(item) in list" :key="item.title">
<a :href="item.url">
<img :src="item.path" :alt="item.title" :style="sizeStyle" />
</a>
</div>
<!-- 过渡图片 -->
<div :style="scrollStyle">
<a :href="firstItem.url">
<img :src="firstItem.path" :alt="firstItem.title" :style="sizeStyle" />
</a>
</div>
</div>
</template>

<script>
let timer;
export default {
name: "Carousel",
props: {
list: {
type: Array,
required: true,
default() {
return [];
}
}
},
data() {
return {
width: 300,
height: 200,
currentIndex: 1,
scrollStyle: { transform: "translateX(0px)" }
};
},
mounted() {
this.begin();
},
computed: {
firstItem() {
return this.list[0];
},
sizeStyle() {
return { width: this.width + "px", height: this.height + "px" };
}
},
methods: {
begin() {
timer = setInterval(() => {
this.move();
}, 2000);
},
move() {
const index = this.currentIndex % this.list.length;
let end = -index * this.width;

this.scrollStyle = {
transform: "translateX(" + end + "px)"
};
this.currentIndex++;
}
},
destroyed() {
clearInterval(timer);
timer = null;
}
};
</script>

知识点：
1.v-for指令：列表渲染
2.v-bind指令（缩写:）：响应式的更改html attribute
3.class和style的绑定

<template>
<div class="carousel" :style="sizeStyle">
<div :style="scrollStyle" v-for="(item) in list" :key="item.title">
<a :href="item.url">
<img
:src="item.path"
:alt="item.title"
:style="sizeStyle"
/>
</a>
</div>
<!-- 过渡图片 -->
<div :style="scrollStyle">
<a :href="firstItem.url">
<img
:src="firstItem.path"
:alt="firstItem.title"
:style="sizeStyle"
/>
</a>
</div>
</div>
</template>

<script>
let timer;
let transtionTimer;
export default {
name: "Carousel",
props: {
list: {
type: Array,
required: true,
default() {
return [];
}
}
},
data() {
return {
width: 300,
height: 200,
currentIndex: 1,
scrollStyle: { transform: "translateX(0px)" }
};
},
mounted() {
this.begin();
},
computed: {
firstItem() {
return this.list[0];
},
number() {
return this.list.length + 1;
},
sizeStyle() {
return { width: this.width + "px", height: this.height + "px" };
}
},
methods: {
begin() {
timer = setInterval(() => {
if (transtionTimer) {
return;
}
this.scroll();
}, 2000);
},
scroll() {
let start = -(((this.currentIndex - 1) % this.number) * this.width);
let end = -(this.currentIndex % this.number) * this.width;
if (end == 0) {
start = 0;
end = -this.width;
}
this.move(start, end);
},
move(start, end) {
let offset = this.width / 20;
//定时器，实现平移效果
transtionTimer = setInterval(() => {
start = start - offset;
if (start <= end) {
clearInterval(transtionTimer);
transtionTimer = null;
start = end;
if (this.currentIndex % this.number == 0) {
this.currentIndex = 1;
} else {
this.currentIndex++;
// 过渡效果：移动到最后一张图后（我们在最后加的第一张图片），把偏移量设置为0，自动切换成第一图
if (this.currentIndex == this.number) {
this.currentIndex = 1;
start = 0;
}
}
}
this.scrollStyle = {
transform: "translateX(" + start + "px)"
};
}, 20);
}
},
destroyed() {
clearInterval(timer);
timer = null;
clearInterval(transtionTimer);
transtionTimer = null;
}
};
</script>

<style scoped>
.carousel {
display: flex;
overflow: hidden;
position: relative;
margin: 0 auto;
width: 100%;
height: 100%;
}
</style>

/* 动画效果 */
.selected {
opacity: 1;
animation: myOpacity 0.6s;
}
.unSelect {
opacity: 0.1;
}

@keyframes myOpacity {
0% {
opacity: 0.1;
}
25% {
opacity: 0.25;
}
50% {
opacity: 0.5;
}
75% {
opacity: 0.75;
}
100% {
opacity: 1;
}
}

<div class="carousel" :style="sizeStyle">
<div :style="scrollStyle" v-for="(item,index) in list" :key="item.title">
<a :href="item.url">
<img
:src="item.path"
:alt="item.title"
:style="sizeStyle"
:class="(currentIndex==index+1)?‘selected‘:‘unSelect‘"
/>
</a>
</div>
<!-- 过渡图片 -->
<div :style="scrollStyle">
<a :href="firstItem.url">
<img
:src="firstItem.path"
:alt="firstItem.title"
:style="sizeStyle"
:class="(currentIndex==1)?‘selected‘:‘unSelect‘"
/>
</a>
</div>
</div>

<div class="dotList">
<span @click="handleSwitch(index)" class="dot" v-for="(item,index) in list" :key="item.title">
<div v-show="currentIndex==index+1" class="dot-actived"></div>
</span>
</div>

.dotList {
display: flex;
position: absolute;
z-index: 1000;
right: 20px;
bottom: 40px;
}
.dot {
width: 10px;
height: 10px;
margin: 0 2px;
background: #fff;
border-radius: 50%;
display: flex;
cursor: pointer;
}

.dot-actived {
width: 10px;
height: 10px;
border-radius: 50%;
background: orange;
}

handleSwitch(index) {
clearInterval(transtionTimer);
transtionTimer = null;
clearInterval(timer);
timer = null;
this.currentIndex = index + 1;

this.scrollStyle = {
transform: "translateX(" + -(index % this.number) * this.width + "px)",
transition: "opacity 0.6s linear"
};
this.begin();
}

知识点：
1.v-show指令：用于条件性地渲染一块内容。元素总是会被渲染，并且只是简单地基于 CSS 进行切换
2.v-for指令：用于条件性地渲染一块内容。是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
3.v-on（缩写@）：监听DOM事件

<div class="carousel" :style="sizeStyle">
<div :style="scrollStyle" v-for="(item,index) in list" :key="item.title">
<a :href="item.url">
<img
:src="item.path"
:alt="item.title"
:style="sizeStyle"
:class="(currentIndex==index+1)?‘selected‘:‘unSelect‘"
/>
</a>
<span v-if="showTitle" class="title">{{item.title}}</span>
</div>
<!-- 过渡图片 -->
<div :style="scrollStyle">
<a :href="firstItem.url">
<img
:src="firstItem.path"
:alt="firstItem.title"
:style="sizeStyle"
:class="(currentIndex==1)?‘selected‘:‘unSelect‘"
/>
</a>
<span v-if="showTitle" class="title">{{firstItem.title}}</span>
</div>
<!-- 指示控件 -->
<div class="dotList">
<span @click="handleSwitch(index)" class="dot" v-for="(item,index) in list" :key="item.title">
<div v-show="currentIndex==index+1" class="dot-actived"></div>
</span>
</div>
</div>

props: {
list: {
type: Array,
required: true,
default() {
return [];
}
},
showTitle: {
type: Boolean,
default() {
return true;
}
}
}

.title {
height: 30px;
background: rgba(213, 213, 230, 0.4);
text-align: center;
position: absolute;
transform: translateY(-100%);
color: #fff;
display: flex;
width: 100%;
justify-content: center;
}