自己做的，但是出了问题了，无法解决了。请求支援~！~！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图项目作业</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div id="container"> <ul id="navigation"> <li >首页</li> <li>点击看看</li> <li>会自动的</li> <li>我的网站</li> </ul> <img id="placeholder" src="img/1.jpg" alt="图片" > </div> <script src="js/index.js"></script> </body> </html>
*{
padding:0;
margin: 0;
font-size: 22px;
}
#container{
width: 600px;
height: 230px;
margin: 100px auto 0;
text-align: center;
box-shadow: 0 8px 24px -12px;
border: 1px solid #ccc;
border-radius: 5px;
}
ul{
list-style: none;
font-size: 0;
}
ul li{
display: inline-block;
width: 150px;
height: 40px;
line-height: 40px;
background: #fff;
cursor:pointer;
}
#placeholder{
width: 100%;
height: 100%;
}
/* 选中样式,默认是第一个有这个样式 */
.selected{
background-color: #ffcc00;
color: #666;
border-radius: 5px;
}// 父容器
var container = document.getElementById('container');
// 获取 li
var ul = document.getElementById('navigation');
var list = ul.getElementsByTagName('li');
// 获取图片占位符
var placeholder = document.getElementById('placeholder');
// 把图片路径直接存储在数组中，因为大多数情况，图片命名是字母而不是数字。
var num = ["img/1.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
// 循环遍历，拿到每一个li标签
for (var i = 0; i < list.length; i++) {
// 设置 自定义索引值，方便获取到它们，去修改对应的图片
list[i].setAttribute('index', i);
list[0].className = 'selected';
// 当鼠标滑过每一个li标签，给它添加class类
list[i].onmousemove = function () {
// 当鼠标进入前应该清除所有 class 类名
for (var j = 0; j < list.length; j++) {
list[j].removeAttribute('class');
}
// 获取索引值
var index = this.getAttribute('index');
// 只有当前鼠标经过元素才添加XX类名
list[index].className = 'selected';
// 修改图片，从数组中取到对应的 索引数据直接赋值给 placeholder 的src 属性
placeholder.src = num[index];
};
}
// 自动播放
// 假设index 是数组的索引
var index = 0;
// 创建 open定时器
var open = setInterval(function () {
// 当定时器开始时，就把list 的类，设置为空
list[index].className = ' ';
// 索引值 每隔2秒自增1
index++;
// num[0] --> 第一张图 == num[index] = 0 ---> 每2秒 ，0 变成 1
// num[1] --> 第二张图 == num[index] = 1 ---> 每2秒 ，1 变成 2
// num[2] --> 第三张图 == num[index] = 2 ---> 每2秒 ，2 变成 3
// num[3] --> 第四张图 == num[index] = 3 ---> 每2秒 ，3 变成 4
placeholder.src = num[index];
// 当假设索引值 超过 数组最大索引，则让它 等于 0，意思是让它回到第一张图
if (index > num.length -1) {
index = 0;
}
// 只有当前鼠标经过元素才添加XX类名
list[index].className = 'selected';
}, 2000);问题1： 自动轮播第二轮往后，第一张图都是无法获取！
问题2： 定时器无法关闭问题。
真心弄了一个小时都没办法做出来。这些都是自己想的，没去抄袭答案。
1
收起
正在回答
1回答
这里是顺序问题，调整如下即可：
定时器关闭需要在鼠标移开的事件中，清除定时器，同学尝试着自己将这部分写一下哦
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星