6-2作业题想要pointer只在选项卡区域使用，但是调不出来

如题，难道要复制全部代码吗？？关于作业的解答就直接在这里询问吗

慕瓜9363615 2017-09-29

源自：JavaScript实现轮播特效 6-2 作业题

31

收起

4回答

monkeyux 2017-09-30 17:11:14

.menu-item{cursor:pointer}

提问者慕瓜9363615 #1

我这么设置过，可还是连图片也有pointer

2017-09-30 17:41:47
樱桃小胖子回复提问者慕瓜9363615 #2

设置 <a href=""><div class="banner-slide slide1 slide-active" onmouseover="this.style.cursor='default'" onmouseout="this.style.cursor='default'"></div> </a>希望可以帮到你~

2017-09-30 17:49:57

樱桃小胖子 2017-09-30 14:18:36

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

 // 假如你想要实现当鼠标放在tab菜单上，图片停止轮播，当鼠标放在单个的tab上图片切换。鼠标放在图片上是。图片不停止，继续轮播的效果，直接将下列的main改成menu即可。即代码如下：
    function slideImg() {
        // var main = byId("main");
        menu.onmouseover = function() {
            //滑过清除定时器
            if (timer)
                clearInterval(timer);
 
        }
        menu.onmouseout = function() {
            timer = setInterval(function() {
                index++;
                if (index >= len) {
                    index = 0;
                }
                changeImg(index);
            }, 1000)
 
        }
        //自动触发
        menu.onmouseout();
    }

另外，建议：

1

2

3

4

5

6

7

8

9

<!--选项卡导航-->
        <div class="menu" id="menu">
            <!-- <div class="menu-item"><span>首页</span></div> -->
            <!-- 这里要设置默认选中的第一项active，否则默认打开第一个选项卡没有选中效果 -->
            <div class="menu-item active"><span>首页</span></div>
            <div class="menu-item"><span>点击看看</span></div>
            <div class="menu-item"><span>会自动的</span></div>
            <div class="menu-item"><span>我的网站</span></div>
        </div>

希望可以帮到你~

提问者慕瓜9363615 2017-09-30 12:01:33

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

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

    <style>
  .main{
     width:1200px;
     height:500px;
     margin:30px auto;
     overflow:hidden;
           }
   
 .menu{
     width:1198px;
     height:70px;
     border:1px solid #ccc;
     border-bottom:none;
     border-radius:10px 10px 0 0; 
     cursor:pointer; 
  }
 .menu-item{
    
    float:left;
    height:70px;
    width:299.5px;
    font-size:22px;
    text-align:center;
    line-height:70px;
    }
 .active{
    background:#FFCC00;
       border-radius:10px 10px 0 0;
     }
   
 *{
  margin:0;
  padding:0;
  }
 body{
  font-family:"Microsoft YaHei";
  }
 .banner{
  width:1200px;
  height:430px;
  overflow:hidden;
  position:relative;
  }
 .banner-slide{
  width:1200px;
  height:430px;
  background-repeat:no-repeat;
  position:absolute;
  display:none;
  }
 .slide1{
  background-image:url("./1.jpg");
  }
 .slide2{
  background-image:url("./3.jpg");
  }
 .slide3{
  background-image:url("./4.jpg");
  }
 .slide4{
  background-image:url("./5.jpg");
  }
 .slide-active{
  display:block;
  }
  
    </style> 
    
    </head>
    <body>
       
         
          <div class="main" id="main">
            <!--选项卡导航-->
          <div class="menu" id="menu">
            <div class="menu-item"><span>首页</span></div>
           <div class="menu-item"><span>点击看看</span></div>
            <div class="menu-item"><span>会自动的</span></div>
             <div class="menu-item"><span>我的网站</span></div>
              
          </div>
          
           <!--图片轮播-->
          <div class="banner" id="banner">
              <a href="">
              <div class="banner-slide slide1 slide-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>
     function byId(id){
   return typeof(id)==="string"?document.getElementById(id):id;
   }
    
   var index=0,
       timer=null,
    pics=byId("banner").getElementsByTagName("div")
    len=pics.length,
    menu=byId("menu"),
    menuItems=menu.getElementsByClassName("menu-item");
     
    
      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;
         }
          changeImg(index);
        },1000)
         
     }
     //自动触发
     main.onmouseout();
    }
     
    for(var m=0;m<menuItems.length;m++){
      menuItems[m].id=m;
      menuItems[m].onmouseover=function(){
     index=this.id;
     
     changeImg();
       }
     }
    //切换图片
    function changeImg(){
       //遍历所有div并且隐藏
       for(var i=0;i<len;i++){
          pics[i].style.display="none";
       menuItems[i].className="menu-item";
        }
       //根据索引显示图片
       pics[index].style.display="block";
       menuItems[index].className="menu-item active";
      
     }
                  
    slideImg();
 </script>
        
 
</body>
</html>

有点多

樱桃小胖子 2017-09-30 09:46:46

亲，你要将你的代码贴上来哦（包括css、js、html）以便于大家更准确的帮你排查问题，祝学习愉快！

提问者慕瓜9363615 #1

他写回复内容不能超过1500字符，所以我就自己在自己的问题下黏贴了我的代码，劳烦你看一下，谢谢了

2017-09-30 12:02:28
樱桃小胖子回复提问者慕瓜9363615 #2

你说的效果是鼠标只有放在选项卡上才停止图片图片轮播么？还是说鼠标放在图片上图片不停止轮播呢？

2017-09-30 14:06:36
提问者慕瓜9363615 回复樱桃小胖子 #3

我希望实现的是cursor：pointer 在指向我定义的menu选项卡时候有反应，指向图片还是默认的指针，但是我不管在哪里设置pointer，都是全部都变成pointer指针

2017-09-30 16:29:02

点开查看后面1条评论

相似问题

6-2作业问题

作业题定时器没效果

3-6选择题

项目作业5-8已选课程私有化属性

老師檢查一下是不是因为使用了this就可以不用定义eq($(this).index())呢

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

JavaScript基础入门 2018

参与学习 547 人
提交作业 206 份
解答问题 640 个

JavaScript作为前端学习中的一个重要组成部分，本课程将带领你从最基础的语法开始，学习js的流程控制语句、函数、内置对象、DOM基础、DOM事件、BOM基础以及经典的js案例--轮播图。

本课精华内容

问答作业

1-6习题

40 11

a.substr(0,10)怎么理解我认为只会从字符串的0到10位找

28 11

为何num3=num1++-num2 最后的结果是5 不应该是6吗

29 11

6-2作业题想要pointer只在选项卡区域使用，但是调不出来

31 10

不知道哪里出错，无法显示div内文本

23 10

查看更多本课问答

请稍等 ...

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

帮助反馈 APP下载

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

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