幻灯片:
自动也可以手动切换图片
效果图:
在页脚部分可以点击数字就看第几张图,这是手动,也可以自动,鼠标离开图片之后,时间可以自己设置过几秒再切换图片。
一些重点代码段:
页脚部分👇–用v-for将图片顺序遍历,在鼠标点击事件中,调用goto,来控制前一张图片和后一张图片。并在computed属性中实现。
<ul class="slide-pages">
<li @click="goto(prevpage)"><</li>
<li v-for="(item,index) in slides " @click="goto(index)">
<a :class="{on:index===nowIndex}"> {{index+1}}</a>
</li>
<li @click="goto(nextpage)">></li>
</ul>
computed属性代码片👇
①、如果此时的页码在最后一页,就return 0,意思是回到第一页,也就是当在最后一页再点击下一页的时候就回到第一页,如果此时不在最后一页呢么点击下一页的时候只需要return this.nowIndex + 1
②、同理当此时在第一页再点击前一页时也这样处理。
computed: {
// 下一页
nextpage() {
//如果到第四页,再点下一页,就会报错,所以要判断一下
if (this.nowIndex === this.slides.length - 1) {
return 0
} else {
return this.nowIndex + 1
}
},
// 前一页
prevpage() {
if (this.nowIndex === 0) {
return this.slides.length - 1
} else {
return this.nowIndex - 1
}
}
},
图片部分👇,这里有个鼠标悬停事件,当鼠标在图片上时,图片不自动跳转,当鼠标不在图片上时,图片自动跳转。图片都在下面的数据当中,等会将整体代码发出来。
<!-- 鼠标悬停,鼠标在的时候停住 -->
<div id="app" class="slide-show" @mouseover="clerInv()" @mouseout="runInv()">
<div class="slide-img">
<a>
<!-- 图片不能写死要绑定 -->
<img :src="slides[nowIndex].src">
</a>
</div>
<h2>{{slides[nowIndex].title}}</h2>
方法methods👇
methods: {
// 点的几就显示第几张图片
goto(index) {
this.nowIndex = index
},
// 定时器自动跳转
runInv() {
// 箭头函数
this.invId = setInterval(() => { this.goto(this.nextpage)
}, 2000)
},
//停
clerInv() {
clearInterval(this.invId)
},
// 生命周期函数,页面一挂在就调用自动跳转
mounted() {
this.runInv()
},
},
整体代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>幻灯片</title>
<style type="text/css">
body,
ul,
h2 {
padding: 0;
margin: 0;
}
.slide-show {
position: relative;
margin: 15px 15px 15px 0;
width: 900px;
height: 500px;
overflow: hidden;
}
.slide-show h2 {
position: absolute;
width: 100%;
height: 100%;
color: #fff;
background: #000;
opacity: .5;
bottom: 0px;
height: 30px;
text-align: left;
padding-left: 15px;
}
.slide-img {
width: 100%;
}
.slide-img img {
width: 100%;
position: absolute;
top: 0;
}
.slide-pages {
position: absolute;
bottom: 10px;
right: 15px;
}
.slide-pages li {
display: inline-block;
padding: 0 10px;
cursor: pointer;
color: #fff;
}
.slide-pages li .on {
/* 出来个下划线 */
text-decoration: underline;
color: #fff;
}
</style>
</head>
<body>
<!-- 鼠标悬停,鼠标在的时候停住 -->
<div id="app" class="slide-show" @mouseover="clerInv()" @mouseout="runInv()">
<div class="slide-img">
<a>
<!-- 图片不能写死要绑定 -->
<img :src="slides[nowIndex].src">
</a>
</div>
<h2>{{slides[nowIndex].title}}</h2>
<!-- 页脚 -->
<ul class="slide-pages">
<li @click="goto(prevpage)"><</li>
<li v-for="(item,index) in slides " @click="goto(index)">
<a :class="{on:index===nowIndex}"> {{index+1}}</a>
</li>
<li @click="goto(nextpage)">></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
//1、创建vue实例
var vm = new Vue({
el: '#app',
data: {
slides: [{
src: '../img/pic1.jpg',
title: '最新书本',
href: 'detail/analysis'
},
{
src: '../img/pic2.jpg',
title: '最热书本',
href: 'detail/count'
},
{
src: '../img/pic3.jpg',
title: '儿童乐园',
href: 'http://xxx.xxx.com'
},
{
src: '../img/pic4.jpg',
title: '下期更新',
href: 'detail/forecast'
}
],
// 第一张图片
nowIndex: 0,
},
computed: {
// 下一页
nextpage() {
//如果到第四页,再点下一页,就会报错,所以要判断一下
if (this.nowIndex === this.slides.length - 1) {
return 0
} else {
return this.nowIndex + 1
}
},
// 前一页
prevpage() {
if (this.nowIndex === 0) {
return this.slides.length - 1
} else {
return this.nowIndex - 1
}
}
},
methods: {
// 点的几就显示第几张图片
goto(index) {
this.nowIndex = index
},
// 定时器自动跳转
runInv() {
// 箭头函数
this.invId = setInterval(() => {
this.goto(this.nextpage)
}, 2000)
},
//停
clerInv() {
clearInterval(this.invId)
},
// 生命周期函数,页面一挂在就调用自动跳转
mounted() {
this.runInv()
},
},
});
</script>
</body>
</html>