自己做的，但是出了问题了，无法解决了。请求支援~！~！

<!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：定时器无法关闭问题。

真心弄了一个小时都没办法做出来。这些都是自己想的，没去抄袭答案。

007号学员 2019-07-19

源自：项目：JS实现轮播图特效 3-8 项目作业

收起

1回答

樱桃小胖子回答被采纳获得+3积分 2019-07-19 20:20:20

这里是顺序问题，调整如下即可：

定时器关闭需要在鼠标移开的事件中，清除定时器，同学尝试着自己将这部分写一下哦

祝学习愉快！

收起回答

007号学员提问者 #1

鼠标滑入，停止轮播，停不下来。。。

2019-07-19 20:26:53
樱桃小胖子回复提问者 007号学员 #2

建议同学先尝试着定义一个鼠标移开事件，在移开事件中定义关闭定时器，先自己尝试着写一下哦，有了基础的代码和思考的过程，老师再帮你具体分析为什么实现不了。学习编程一定要先自己动手实践哦。

2019-07-20 12:03:35