1.HTML手搓轮播图
虽然现在前端框架很多,很多情况不需要自己手搓组件,但是为了解决初学者的学习问题,这里我还是给大家分享下吧。
首先是html代码
<div class="center-pic">
<div id="lunboimg">
<a href="#">
<img src="img/0.jpg" class="carousel-image" />
</a>
<div id="selector">
<span class="selector-span"></span>
<span class="selector-span"></span>
<span class="selector-span"></span>
<span class="selector-span"></span>
<span class="selector-span"></span>
</div>
</div>
</div>
然后是css代码
#lunboimg {
width: 200px;
height: 200px;
position: absolute;
display: flex;
}
.carousel-image {
width: 800px;
height: 310px;
object-fit: cover;
}
#selector{
position: absolute;
bottom:-100px;
right:-580px;
display: flex;
justify-content: space-between;
z-index: 100;
}
#selector span {
display: inline-block;
width: 10px;
height: 10px;
background-color: gray;
margin: 0 5px;
cursor: pointer;
}
最重要的js代码
let img = document.querySelector('#lunboimg .carousel-image');
let spans = document.querySelectorAll('#selector .selector-span');
let index = 0;
let timer;
function show() {
img.src = `img/${index}.jpg`;
spans.forEach(span => span.style.backgroundColor = 'gray');
spans[index].style.backgroundColor = 'red';
}
function autoPlay() {
timer = setInterval(function() {
index = (index + 1) % spans.length;
show();
}, 1000);
}
autoPlay();
function ctrlPlay() {
spans.forEach((span, i) => {
span.onclick = function() {
index = i;
show();
};
});
}
ctrlPlay();
function eventList() {
spans.forEach((span, i) => {
span.addEventListener('mouseenter', function() {
clearInterval(timer);
index = i;
show();
}, false);
span.addEventListener('mouseleave', function() {
autoPlay();
}, false);
});
}
eventList();
这里要注意刚开始的img和span的命名,最好在html里相应部分加上class,避免和页面其他的img和span搞混,这里的js功能包括自动轮播和鼠标控制播放。
2.解决轮播图无法播放问题
第二个部分是我写代码时遇到的,不一定和大家的一样,但是大家可以参考下,我觉得很容易出错。这里的前端代码都是正确的,我去打印了下前端span.length的值,发现是0。
所以很有可能是页面没加载出来就执行了js代码,导致没获取到正确的span.length
于是我又回头看了代码,发现我引用的<script>在head标签里,也就是body的上方,答案呼之欲出,我把<script>放在body的最后,使得浏览器先解析html再执行js逻辑,发现完美的解决了问题~
(关灯睡觉ZZZ)