点击切换报错

我看了一下发现是ID没有赋值上去，这是为啥欸？
最后我直接在div上写上ID就可以了。。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>轮播图</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<!-- 头部 -->
	<div class="header" id="header">
		<!-- 上方标签 -->
		<div class="tips" id="tips">
			<div class="active">首页</div>
			<div>贯穿全站</div>
			<div>体验</div>
			<div>携手前后端</div>
		</div>
		<!-- banner轮播图 -->
		<div class="banner" id="banner">
			<a href="">
				<div class="banner-slide slide1 active"></div>
			</a>
			<a href="">
				<div class="banner-slide slide2"></div>
			</a>
			<a href="">
				<div class="banner-slide slide3"></div>
			</a>
			<a href="">
				<div class="banner-slide slide4"></div>
			</a>
		</div>
	</div>
	<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

// 封装document.getElementById
function byId(idname){
	return typeof(idname)==="string"?document.getElementById(idname):idname;
}

var index=0,
	timer=null,
	pics=byId("banner").getElementsByTagName("div"),
	tips=byId("tips").getElementsByTagName("div"),
	len=pics.length;

//轮播效果
function slideImg(){
	var banner=byId("banner"),
		header=byId("header");
	//鼠标滑过停止
	header.onmouseover=function(){
		if(timer){
			clearInterval(timer);
		}
	}

	//鼠标离开继续轮播
	header.onmouseout=function(){
		timer=setInterval(function(){
			index++;
			if(index==len){
				index=0;
			}
			changeImg();
		},1000);
	}
}

function changeImg(){
	for(var i=0;i<len;i++){
       tips[i].className = "";
       pics[i].style.display = "none";
   }
	tips[index].className="active";
	pics[index].style.display="block";
	
}

//点击标签切换
for(var i=0;i<len;i++){
	tips.id=i;
	tips[i].onclick=function(){
		index=this.id;
		changeImg();
	}
}

slideImg();

活在梦里_JPG 2017-09-10

源自：项目：JS实现轮播特效 3-6 点击圆点切换图片（1）

79

收起

4回答

淡定自燃人回答被采纳获得+3积分 2017-09-11 17:29:32

不知道你有没有听过ID是唯一的。你的tips就是通过ID定义，你又反向给他定义一个新的id？

活在梦里_JPG 提问者 #1

JS代码中的tips是 tips下的div 先把代码看全不过托你的福我也知道错在哪里了

2017-09-12 12:21:29

美丽赵 2017-09-11 20:06:57

id并没有赋上去，原因是：在调用slideImg()方法后, 点击标签切换是永远也执行不到的。

for循环应该放在 slideImg()方法里，最好是在header.onmouseout()方法后。

还有：27行最好写成这样：if(index>=3) index=0;

还有：34行最好加上一句：header.onmouseout();

不要问为什么？请看视频..

美丽赵 #1

还有一句47行，应该是这样：tips[i].id=i; var a=

2017-09-11 20:11:06
美丽赵 #2

47行：tips[i].id = "my_"+i ; 49行：var a = this.id.split("_");

2017-09-11 20:14:49
美丽赵 #3

再加一句：index=a[1] ;

2017-09-11 20:15:40

点开查看后面1条评论

提问者活在梦里_JPG 2017-09-11 12:20:58

//点击标签切换
for(var i=0;i<len;i++){
    tips.id=i;
    tips[i].onclick=function(){
        index=this.id;
        changeImg();
    }
}

这一段不是定义ID了吗，视频里的代码也是这样的，，，
还有就是图片切换的时候会出现一瞬间的空白这是为什么

卡布琦诺 2017-09-11 11:35:43

首先要在html中定义id，才能在js中获取到这个id。你刚开始没有在html中定义id，因此在js中是获取不到的，祝学习愉快！

提问者活在梦里_JPG #1

//点击标签切换 for(var i=0;i<len;i++){ tips.id=i; tips[i].onclick=function(){ index=this.id; changeImg(); } } 这一段不是定义ID了吗，视频里的代码也是这样的，，，还有就是图片切换的时候会出现一瞬间的空白这是为什么

2017-09-11 12:22:08

相似问题

控制台报错了，帮忙看下

老师，当我点击列表中的内容时切换不了不同的

麻烦老师为什么我的点击事件没有反应？

图片切换问题

老师，请问下面的代码，为啥点击按钮，不能实现切换图片的功能呢？

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36713 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载