基于JavaScript实现classroom轮播图效果
【摘要】 今天日常浏览华为云时，寻思着云学院的classroom的动态轮播图挺好看的，闲来无事模仿一下，之前也做过类似的轮播，这里算是巩固一下知识吧。此效果运用了动画+控制点绑定事件，还添加了计时器，延迟自动下一张banner。话不多说，上效果图。html代码：<body> <div class="page"> <div class="box" id="swiper-box"> <!...
今天日常浏览华为云时，寻思着云学院的classroom的动态轮播图挺好看的，闲来无事模仿一下，之前也做过类似的轮播，这里算是巩固一下知识吧。此效果运用了动画+控制点绑定事件，还添加了计时器，延迟自动下一张banner。话不多说，上效果图。
html代码：
<body>
<div class="page">
<div class="box" id="swiper-box">
<!-- 轮播图html部分 -->
</div>
<div class="swiper-pagination-box" id="pagination-box">
</div>
</div>
</body>css代码：
<style>
* {
margin: 0;
padding: 0;
}
.page {
width: 100%;
overflow: hidden;
position: relative;
}
.box {
transition: all 0.5s;
position: relative;
left: 0;
}
/* //轮播图css样式部分 */
.box img {
width: 100vw;
height: 100%;
float: left;
}
.swiper-pagination-box {
height: 30px;
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%, 0);
z-index: 3;
display: flex;
}
.swiper-pagination-item {
height: 8px;
width: 8px;
border-radius: 4px;
background: rgba(0, 0, 0, .4);
margin: 11px 5px;
transition: all 0.3s;
}
.swiper-pagination-item-active {
padding: 0 10px;
background: #5E7CE0;
}
</style>重点来说说js的代码
这里初始化轮播图的index和计算器timer，然后添加一个常量数组，存放了4张banner图片。
script type="text/javascript">
/*轮播图javascript部分*/
const box = document.getElementById('swiper-box')
const paginationBox = document.getElementById('pagination-box')
let nowIndex = 0; //当前的轮播图index
let timer = null; //计时器
const swiperData = [
{ imgurl: 'https://classroom.devcloud.huaweicloud.cn/KV-1.d496dac2e01a2f29ef36.png' },
{ imgurl: 'https://classroom.devcloud.huaweicloud.cn/KV-3.c93386044625bf888759.png' },
{ imgurl: 'https://classroom.devcloud.huaweicloud.cn/KV-2.baeadc40378c8355fdd3.png' },
{ imgurl: 'https://classroom.devcloud.huaweicloud.cn/KV-4.4e963885af14af72bd9f.png' }
]接着 设置轮播图容器的宽度
box.style.width = `${parseInt(swiperData.length+1) *100}vw`;然后再添加轮播图，进行遍历
function addSwiper() {
for (let i in swiperData) {
const img = document.createElement("img");
img.src = swiperData[i].imgurl;
box.appendChild(img);
const sapn = document.createElement("span");
sapn.classList.add("swiper-pagination-item");
if (i == 0) {
sapn.classList.add("swiper-pagination-item-active");
}
paginationBox.appendChild(sapn);
}
接着在图片的最后添加第一张图，以至当循环到最后一张时会继续跳到第一张继续
const img = document.createElement("img");
img.src = swiperData[0].imgurl;
box.appendChild(img);
}
这里获取控制点，然后进行自动播放banner
addSwiper();
const paginationItems = document.querySelectorAll(".swiper-pagination-box .swiper-pagination-item")
function autoplay() {
timer = setInterval(() => {
changeSwiperItem()
}, 5000)
}
autoplay()
接着再写图片移动，根据index来移动图片。然后先清除动画，再把图片移到第一张上
function changeSwiperItem() {
const swiperItems = document.querySelectorAll(".box img")
if (nowIndex + 1 == swiperData.length) {
box.style.left = `-${(nowIndex+1) *100}vw`;
nowIndex = 0;
setTimeout(() => {
box.style.transition = "0s"
box.style.left = `-0vw`;
}, 600)
} else {
box.style.transition = "all 0.5s"
box.style.left = `-${(nowIndex +1) *100}vw`;
nowIndex++;
}
delClass()
paginationItems[nowIndex].className = 'swiper-pagination-item swiper-pagination-item-active';
}
最后清除样式，再给每个控制点绑定事件就欧克了。
function delClass() {
for (let i in paginationItems) {
paginationItems[i].className = 'swiper-pagination-item';
}
}
function paginationItemClick() {
for (let i in paginationItems) {
paginationItems[i].onclick = function () {
delClass()
this.className = 'swiper-pagination-item swiper-pagination-item-active';
nowIndex = parseInt(i);
clearInterval(timer)
box.style.transition = "all 0.5s"
box.style.left = `-${(nowIndex) *100}vw`;
autoplay()
}
}
}
paginationItemClick()整体流程就是这样的，是不是很(斯国一)?
附上详细完整代码。
-
1.44KB 下载次数：2次
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）