轮播图在点击一瞬间是切换图片的松开鼠标后又回去了什么原因
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" id="main">
<!--导航-->
<nav class="nav" id="nav">
<a href="" class="bgcolor">首页</a>
<a href="" class="">点击看看</a>
<a href="" class="">会自动的</a>
<a href="" class="">我的网站</a>
</nav >
<!--图片轮播-->
<div class="ban" id="ban">
<a href=""><div class="banner img1 visit"></div></a>
<a href=""><div class="banner img2 "></div></a>
<a href=""><div class="banner img3 "></div></a>
<a href=""><div class="banner img4 "></div></a>
</div>
</div>
<script src="js/js.js"></script>
</body>
</html>
*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
body{
font-family: "Microsoft YaHei UI";
}
.main{
margin: 0 auto;
height: 520px;
width: 1200px;
}
/*导航栏*/
.nav{
width: 1200px;
height: 60px;
line-height: 60px;
}
.nav>a{
width: 300px;
font-size: 22px;
font-weight: 400;
color: #666;
text-align: center;
border-radius: 8px;
float: left;
}
.bgcolor{background-color:#ffcc00}
.active{
background-color: #FFCC00;
}
/*轮播图*/
.ban{
position: relative;
}
.banner{
position: absolute;
height: 460px;
width: 1200px;
display: none;
background-repeat: no-repeat;
}
.img1{
background-image: url(../img/1.jpg);
}
.img2{
background-image: url(../img/3.jpg);
}
.img3{
background-image: url(../img/4.jpg);
}
.img4{
background-image: url(../img/5.jpg);
}
.visit{
display: block;
}
var timer=null,
main=byid('main'),
nav=byid('nav'),
nav_a=byid('nav').getElementsByTagName('a'),
ban=byid('ban'),
banner=byid('ban').getElementsByClassName('banner'),
index=0;
function byid(id){
return typeof (id)==="string"?document.getElementById(id):id;
}
/*轮播图*/
/*鼠标滑过取消自动播放*/
function stopplay(){
if(timer) clearInterval(timer);
}
/*播放图片*/
function autoplay(){
timer=setInterval(function(){
index++;
if(index>=banner.length) index=0;
chaimg();
},1000)
}
function chaimg(){
for(var i=0;i<banner.length;i++){
banner[i].style.display='none';
nav_a[i].className='';
}
banner[index].style.display='block';
nav_a[index].className='bgcolor';
}
/*鼠标点击时切换图片*/
function clickimg(){
main.onmouseover=function(){stopplay();}
main.onmouseout=function(){autoplay();}
main.onmouseout();
/* for (var m = 0; m < nav_a.length; m++) {
nav_a[m].setAttribute('img_index', m);
nav_a[m].onclick = function () {
index = this.getAttribute('img_index');
chaimg();
}
}*/
for(var i=0;i<nav_a.length;i++){
nav_a[i].id=i;
nav_a[i].onclick= function(){
index=this.id;
chaimg();
}
}
}
clickimg() ;
1 | <br> |
正在回答
你的js代码写的太乱了，建议你可以先提交作业，然后写上自己哪里不会，然后让老师给你批，老师应该会给你详细的评价和修改建议。不过不用担心分数，再交一次作业就好了，改过之后分数更高。
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星