关于图片轮播
代码如下：（HTML部分）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="css/style.css">
<script src="scripts/script.js"></script>
</head>
<body>
<header>
<div class="aside">
<div class="nav1"></div>
<div class="nav2"></div>
<div class="nav3"></div>
<div class="nav4"></div>
</div>
<div class="main">
<div class="banner">
<div class="banner-terms banner1"><img src="img/bg1.jpg" alt=""></div>
<div class="banner-terms banner2"><img src="img/bg2.jpg" alt=""></div>
<div class="banner-terms banner3"><img src="img/bg3.jpg" alt=""></div>
</div>
<div class="dot">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
</div>
<div class="arrows">
<div class="arrows1"></div>
<div class="arrows2"></div>
</div>
</div>
</header>
<section></section>
</body>
</html>
（CSS部分）
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 14px;
}
/* ceshi */
section{
width: 100px;
height: 100px;
background: blue;
}
header{
margin-top: 30px;
width: 100%;
height: 460px;
background: red;
}
header > .main{
height: 100%;
width: 1200px;
margin: 0 auto;
}
header > .main > .banner {
position: relative;
}
header > .main > .banner > .banner-terms{
position: absolute;
top: 0;
left: 0;
display: none;
}
header > .main > .banner > .banner1{
display: block;
}
（JS部分）
window.onload=function(){
//全局变量
var banner=document.getElementsByClassName("banner"),
bannerTerms=document.getElementsByClassName("banner-terms"),
index=0;
//banner自动轮播
function startAutoPlay(){
timer=setInterval(function(){
for(var i=0;i<bannerTerms.length;i++){
bannerTerms[i].style.display="none";
}
index++;
if(index>2){
index=0;
}
bannerTerms[index].style.display="block";
},3000);
}
//banner停止轮播
function stopAutoPlay(){
if(timer){
clearInterval(timer);
}
}
bannerTerms[0].onmouseout=function(){
startAutoPlay();
}
bannerTerms[0].onmouseover=function(){
stopAutoPlay();
}
}
代码写到这里，clearInterval的时候，为什么图片还会继续跳转，知道跳转到第一张图片才停下？
正在回答 回答被采纳积分+1
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星