|
写个人博客时写到了轮播图 先说明未完善的地方：在第一张图片按左键时，不能转到最后一张图片（但最后一张图片按右键时可以转到第一张图片）。 不过一般第一张图片也不需要转到最后一张，所以没大问题。（可以试试遍历图片找到最后一张）
有建议或疑问的话可以在评论区提出
最终效果如下： 
html代码：
css代码：
/* 轮播图 start */
.loop {
width: 100%;
height: 569px;
/* background-color: green; */
overflow: hidden;
}
.arrowBox {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto 25px;
height: 50px;
}
.arrow {
background-color: #fff;
opacity: 0.3;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.arrow:hover {
opacity: 0.9;
}
.loopImg {
display: none;
}
.active {
display: block;
}
.arrow i {
font-size: 52px;
color: rgb(49, 49, 49,0.7);
position: absolute;
top: -2px;
left: 16px;
}
/* 轮播图 end */
js代码：
window.onload = function() {
var rightArrow = document.querySelector('.rightArrow');
var leftArrow = document.querySelector('.leftArrow');
// 主页右箭头
rightArrow.onclick = function() {
for(var i = 0; i
// 怎么获取下一张图片的节点？
// var next = document.querySelector('.active+img');
var next = active.nextElementSibling;
next.classList.add('active');
// 把当前图片的.active删除
active.classList.remove('active');
} else {
var first = document.querySelector("img[data-id='1']");
first.classList.add('active');
active.classList.remove('active');
}
for(var i = 0; i
for(var i = 0; i
// 怎么获取上一张图片的节点？
var before = active.previousElementSibling;
before.classList.add('active');
// 把当前图片的.active删除
active.classList.remove('active');
// } else {
// 获取不了最后一个兄弟元素，所以第一张图片不能转到最后一张
// var last =
// console.log(last);
// last.classList.add('active');
// active.classList.remove('active');
// }
for(var i = 0; i |