咔片PPT · AI自动生成演示文稿，模板丰富、排版精美
讯飞智文 · 一键生成PPT和Word，高效应对学习与办公
示例简介
本实例介绍利用Vue实现幻灯片组件，可设置幻灯片不同图片、图片点击跳转地址和切换时间等；
最终效果：
实现过程
一、子组件代码如下（slide.vue），原理分析：
1、切换幻灯片时候，使用两个transition（使用vue的动画效果），一个左移动并消失（slide-trans-old），另一个左移动并显示（slide-trans，即点击要显示的幻灯片）；
2、点击切换函数toggleSlide：
2.1 每次点击数字，左移动并消失当前幻灯片（isShow = false），同时显示点击数字的幻灯片（nowIndex = index）；
2.2 每次点击左右箭头，由于使用了计算属性（computed），点击左箭头传参prevIndex，所以会切换到当前上一个幻灯片；而点击右箭头传参nextIndex，所以会切换到当前下一个幻灯片；
2.3 自动切换幻灯片函数autoToggleSlide，每次都会根据设置的定时器时间（slideTime）调用函数toggleSlide；
3、鼠标移到幻灯片上面（mouseover），会停止自动切换（clearInv）；移开则重新开始自动切换（autoToggleSlide）。
{{slideList[nowIndex].name}}
{{index + 1}}
<style lang="less" scoped="">
.slide-box {
position: relative;
width: 600px;
height: 342px;
overflow: hidden;
.slide {
width: 100%;
height: 100%;
.arrows {
position: absolute;
top: 50%;
transform: translateY(-50%);
img {
width: 50px;
opacity: 0.8;
cursor: pointer;
}
&.right {
right: 0;
img {
transform: rotateZ(180deg);
}
}
}
.slide-link {
display: block;
width: 100%;
height: 100%;
}
.slide-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.slide-mes {
position: absolute;
bottom: 0;
width: 100%;
background-color: #000;
color: #fff;
opacity: 0.5;
color: #fff;
padding: 8px 15px;
box-sizing: border-box;
font-size: 12px;
display: flex;
.slide-title {
flex: 1;
}
.slide-number {
cursor: pointer;
display: inline-block;
width: 30px;
text-align: center;
&.active {
font-size: 16px;
text-decoration: underline;
}
}
}
}
}
/* 动画效果 */
.slide-trans-enter-active {
transition: all .5s;
}
.slide-trans-enter {
transform: translateX(600px);
}
.slide-trans-old-leave-active {
transition: all .5s;
transform: translateX(-600px);
}
</style>
二、父组件代码如下（slidePage.vue），原理分析：
主要用来传参（slideList和slideTime）给子组件，slideList是幻灯片显示的数据，slideTime是幻灯片切换的时间。
<style lang="less" scoped="">
</style>
