HTML手搓轮播图＋解决轮播图无法播放问题

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）