点击切换报错

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<!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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

// 封装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

1

2

3

4

5

6

7

8

//点击标签切换
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 份
解答问题 36712 个

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

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

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

378 40

到底是cellspacing还是cellpacing?

0 35

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

60 30

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号