话不多说直接搞源码
么有啥高级的东西就是将图片重叠在一起通过改变透明度来显示
仔细看看就懂了
先引入vue
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>HTML区
用V-for将图片循环
绑定路径时 '字符串' + 数值 + '字符串' (这个灵活应用比较重要)
<body>
<div id="app" class="chart">
<img v-for="i in 5" :src="'/image/'+ ( i-1) + '.jpg'" :class="{current:nowIdx==i-1}">
<!-- 小圆点 -->
<div class="carousel">
<p v-for="i in 5" :class="{current:nowIdx==i-1}" @click="nowIdx=i-1"></p>
</div>
</div>
</body>Javascript区
#app绑定上方div
还有data放图片的id数据
<script>
new Vue({
// 入口
el: '#app',
//数据
data: {
// 当前图片
nowIdx: 0
},
});
</script>CSS区
主要在用绝对定位将图片覆盖在一起
运用绝对定位的父元素要使用相对定位
以及绝对定位下使用transform来调整元素位置
弹性容器均匀排列每个元素
都写在注释看看就会了
<style>
* {
margin: 0;
padding: 0;
}
.chart {
width: 650px;
height: 360px;
border: 1px solid red;
margin: 10px auto;
/* 子绝 父相 */
position: relative;
}
.chart img {
position: absolute;
top: 0;
left: 0;
/* 透明度 */
opacity: 0;
/* 过度让透明度以动画形式进行 */
transition: all 2s;
}
.chart img.current {
opacity: 1;
}
.chart .carousel {
position: absolute;
width: 200px;
height: 20px;
bottom: 10px;
left: 50%;
/* 再向左50% 实现居中 */
transform: translateX(-50%);
/* 弹性盒容器实现下面 p 在一行 */
display: flex;
/* 均分 */
justify-content: space-between;
}
/* 小圆点 */
.chart .carousel p {
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
}
.chart .carousel p.current {
background-color: yellow;
}
</style>