Vue实现轮播图
先上总代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="css/mycss.css" type="text/css" media="screen" /> -->
<title>Vue实现轮播图</title>
<style>
/* 获取id用# 获取class用. */
body {
margin: 0 0;
background-color: darkgray;
}
#app {
/*border: 1px solid red;*/
margin: 10% auto;
width: 840px;
height: 620px;
}
#picture {
margin-top: 20px;
margin-left: 20px;
margin-bottom: 0;
}
.left {
float: left;
margin-left: 2.3%;
}
.right {
float: right;
margin-right: 2.3%;
}
.left,
.right {
margin-top: -300px;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app">
<img id="picture" :src="pic" alt="素材图片" />
<img class="left" v-show='showLeft' @click="prevHandler" :src="left" alt="" />
<img class="right" v-show='showRight' @click="nextHandler" :src="right" alt="" />
</div>
<!-- CDN 必须联网 -->
<!-- 引入时会生成一个Vue()的全局变量 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
//创建一个Vue对象
var vm = new Vue({
//挂载点
el: '#app',
//数据
data: {
pic: 'images/01.jpg', //进入页面直接显示的图片
showLeft: false, //左箭头life
showRight: true, //右箭头life
right: 'images/next.png', //左箭头图片
left: 'images/prev.png', //右箭头图片
begin: 1, //图片起始编号
end: 4, //图片最终编号
idx: 1 //图片当前编号
},
//方法
methods: {
//点击左箭头
prevHandler: function () {
if (this.idx > this.begin) {
this.idx--;
}
this.showLeft = this.idx !== this.begin;
this.showRight = true;
this.pic = 'images/0' + this.idx + '.jpg';
},
//点击右箭头
nextHandler: function () {
if (this.idx < this.end) {
this.idx++;
}
this.showLeft = true;
this.showRight = this.idx !== this.end;
this.pic = 'images/0' + this.idx + '.jpg';
}
}
});
</script>
</body>
</html>
CSS
css部分由于个人操作不太熟悉,且本网页布局相对简单,这里并不做过多解释
HTML
html的基本骨架也很简单,直接在创建一个div
并在里面放三个img
即可。
<div id="app">
<img id="picture" :src="pic" alt="素材图片" />
<img class="left" v-show='showLeft' @click="prevHandler" :src="left" alt="" />
<img class="right" v-show='showRight' @click="nextHandler" :src="right" alt="" />
</div>
v-show
根据真假切换元素的显示状态,原理修改元素的dispaly,实现显示隐藏,数据改变之后,对应的元素的状态同步更新
v-on:click
简写为**@click**(v-on指令的作用是绑定事件,简写为@)
v-bind:src
缩写为**:src** (v-bing指令的作用是绑定属性,简写为:)
JavaScript
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
CDN 必须联网
引入时会生成一个Vue()的全局变量
//创建一个Vue的对象
var vm = new Vue({
//挂载点
el: '#app',
//数据
data: {
pic: 'images/01.jpg', //进入页面直接显示的图片
showLeft: false, //左箭头life
showRight: true, //右箭头life
right: 'images/next.png', //左箭头图片
left: 'images/prev.png', //右箭头图片
begin: 1, //图片起始编号
end: 4, //图片最终编号
idx: 1 //图片当前编号
},
//方法
methods: {
//点击左箭头
prevHandler: function () {
if (this.idx > this.begin) {
this.idx--;
}
this.showLeft = this.idx !== this.begin;
this.showRight = true;
this.pic = 'images/0' + this.idx + '.jpg';
},
//点击右箭头
nextHandler: function () {
if (this.idx < this.end) {
this.idx++;
}
this.showLeft = true;
this.showRight = this.idx !== this.end;
this.pic = 'images/0' + this.idx + '.jpg';
}
}
});
版本2
此处只放thml
和JavaScript
代码
这里用了数组的方法实现,理解了上面的版本1,再看版本2应该会很好理解
<body>
<div id="app">
<div class="center">
<h2>Vue轮播图_版本2</h2>
<img :src="imgList[index]" alt="">
<a href="javascript:void(0)" @click="prev" v-show="index > 0" class="left">
<img src="images/prev.png" alt="">
</a>
<a href="javascript:void(0)" @click="next" v-show="index < imgList.length-1" class="right">
<img src="images/next.png" alt="">
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var vm = new Vue({
data: {
imgList: [
'images/01.jpg',
'images/02.jpg',
'images/03.jpg',
'images/04.jpg'
],
//数组下标从0开始
index: 0
},
methods: {
prev: function () {
this.index--;
},
next () {
this.index++;
}
}
});
//手动挂载
vm.$mount('#app');
</script>
</body>