轮播图现在有很多现成的组件,网上也有很多的教程来教大家写一个轮播图,这里我们用最简单的方式去实现一个轮播图。
首先我们写出我们需要的页面元素,很简单,一个p嵌套着两个p+一个图片。
然后我们写一下这几个样式
.box {
width: 100%;
height: 100%;
padding-top: 10%;
display: flex;
align-content: flex-start;
align-items: center;
justify-content: center;
}
/* 采用绝对定位,在当前页面定位切换按钮的位置 */
.box-left {
position: absolute;
width: 50px;
height: 200px;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: rgb(13, 167, 202);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.box-right {
position: absolute;
width: 50px;
height: 200px;
top: 50%;
right: 0;
transform: translateY(-50%);
background-color: rgb(13, 167, 202);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.swiper-img {
width: 100%;
height: 100%;
}
最后我们再写下切换用的两个函数
//获取轮播图元素
var el = document.getElementById('swiper');
//待切换轮播图路径,组合成数组
var image = ['//img02.bs178.com/bf/ug/4609e78737f709a1.jpg', 'image/2.jpg', 'image/3.jpg', 'image/4.jpg']
//当前轮播图数组下标
var i = 0;
function left() {
//默认赋值第一个路径
el.src = image[i];
//路径下标+1,切换路径
i++;
//路径下标超出数组长度,赋值为0
if (i == image.length) {
i = 0;
}
}
function right() {
//默认赋值第一个路径
el.src = image[i];
//路径下标-1,切换路径
i--;
//路径下标太低,赋值为数组长度-1
if (i == -1) {
i = image.length - 1;
}
}
JS函数已经尽量多的添加了注释,应该非常好理解。以后无论有多少张图片,都只需要把图片路径加到图片数组里就可以了。想自动切换就加个定时器。
收工。
页面更新:2024-05-01
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号