就是我现在显示了8张图，然后我想用左右两边的按钮也可以手动控制图片转换。
但是我一开始打开网站的时候怎么获取我当前图片在ali中的哪个位置呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
position: relative;
width: 665px;
overflow: hidden;
}
ul {
list-style: none;
}
#btn li {
float: left;
margin: 0 10px;
width: 12px;
height: 12px;
background: blanchedalmond;
border-radius: 50%;
cursor: pointer;
}
#btn {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -128px;
}
#img {
width: 665px;
height: 362px;
overflow: hidden;
}
img {
width: 665px;
height: 362px;
}
#btn li.change {
background: cornflowerblue;
width: 16px;
height: 16px;
margin-top: -2px;
}
</style>
<script>
window.onload = function(){
var ali = document.getElementsByTagName('li');
var halfali = ali.length / 2;
for(var i = 0; i < halfali; i++){
ali[i].index = i;
ali[i].onclick = function(){
for(var j = 0; j < halfali; j++){
ali[j + halfali].style.display = 'none';
ali[j].className = '';
}
ali[this.index + 8].style.display = 'block';
this.className = 'change';
}
}
</script></head>
<body>
<p class="wrap">
<ul id="btn">
<li class="change"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="img">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/6.jpg"/></li>
<li><img src="img/7.jpg"/></li>
<li><img src="img/8.jpg"/></li>
</ul><!--
<p id="turn-left" class="turn"><</p>
<p id="turn-right" class="turn">></p>-->
</p></body>
</html>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你的方向不对，应该是所有图片都有公共的class，当前显示的图片有一个特别的class，根据这个特别的class来选择当前的图片。
把图片路径放到json里，循环显示就可以了。你随时都能判断当前是哪张图片在显示