关于 js 的6-2作业问题

来源：6-1 案例总结

qjt6317800

2017-08-25 17:52:16

老师，您好！

我的js 代码里面自动轮播图片问题不大，就是用鼠标点击事件时，总感觉哪里不对劲，点击后也没有立即跳转正确的图片不说，还导致点击后，图片依旧自动轮播，有点乱乱的赶脚，你能帮我看看是哪里不对，并把js 代码修改一下好吗？我困惑了好久，新手莫要见怪1!1

<!DOCTYPE html>
<html>
<head>
	<title>6-2作业</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="main" id="main">
		<!-- 导航 -->
		<div class="nav" id="nav">
			<ul>
				<li><a href="">首页</a></li>
				<li><a href="">点击看看</a></li>
				<li><a href="">会自动的</a></li>
				<li><a href="">我的网站</a></li>
			</ul>
		</div>
		<!-- 图片 -->
		<div class="banner" id="banner">
			<a href="">
				<div class="picture no1 no-active"></div>
			</a>
			<a href="">
				<div class="picture no2"></div>
			</a>
			<a href="">
				<div class="picture no3"></div>
			</a>
			<a href="">
				<div class="picture no4"></div>
			</a>
			 
		</div>
	</div>
	<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

css code:

*{
	margin:0;
	padding:0;
}

body{
	font-family:"微软雅黑";
	color:#fff;
}
a:link,a:visited{
	text-decoration:none;
}
.main{
	width:1200px;
	height:490px;
	margin:30px auto;
	overflow:hidden;
	position:relative;
	clear:left;
}
.nav{
	width:100%;
	height:30px;
	position:absolute;
	left:0;
	top:0;
	/*background-color: green;*/
}
ul{
	list-style:none;
	float:left;
	width:100%;

}
ul li{
	float:left;
	width:25%;
	text-align:center;
	line-height: 30px;
}
.banner{
	width:100%;
	height:460px;
	position:absolute;
	top:30px;
	left:0px;
	background-size:cover;
}

.picture{
	width:100%;
	height: 460px;
	position: absolute;
	top:0;
	left:0;
	display: none;
}
.no-active{
	display:block;
}
.no1{
	background-image:url("../img/1.jpg");
}
.no2{
	background-image:url("../img/3.jpg");
}
.no3{
	background-image:url("../img/4.jpg");
}
.no4{
	background-image:url("../img/5.jpg");
}

js code:

//封装一个代替getElementById()的方法
function byId(id){
	return typeof(id)==="string"? document.getElementById(id):id;
}

var index=0,
timer=null,
nav=byId("nav"),
pics=nav.getElementsByTagName("li"),
banner=byId("banner"),
picture=banner.getElementsByClassName("picture"),
div=banner.getElementsByTagName("div");
len=pics.length;
    // console.log(len);
    
    function slideImg(){
    	var main=byId("main");

	//鼠标滑过清除定时器,离开继续
	main.onmouseover=function(){
 		//鼠标滑过清除定时器
 		if(timer) clearInterval(timer);

 	}

	//鼠标离开,开始自动轮播图片
	main.onmouseout=function(){
		timer=setInterval(function(){
			index++;
			if(index>=len){
				index=0;
			}
			// console.log(index);
			changeImg();
		},1000);
	}
	main.onmouseout();
	//老师，你好，就是这里，我不知道哪里错了，导致点击后，还是会自动轮播图片，
	//主要是和下边联系起来，就有点糊涂了，老师批改作业时，帮忙解决一下，谢谢您。
	for(var j=0;j<len;j++){
		pics[j].id=j;
		pics[j].onmousedown=function(){
			index=this.id;
			console.log(index);
			changeImg();
		}
	}

}
//切换图片函数
function changeImg(){
	// 遍历banner下的所有div，并将div隐藏
	for(var i=0;i<len;i++){
		picture[i].style.display="none";
		pics[i].style.background="none";
	}
	picture[index].style.display="block";
	pics[index].style.background="#ffcc00";
}
slideImg();

写回答

1回答