滚动条没出来

滚动条没出来

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幕家居</title>
    <link rel="stylesheet" href="./css/css.css">
    <link rel="stylesheet" href="./css/reset.css">
    <style>
         
    </style>
</head>
<body>
    <!-- 头部区域 -->
    <header class="head clearfix">
        <div class="top center-wrap">
            <div class="lixi">服务热线：400-8888-888</div>
        </div>
        <div class="nav">
            <div class="logo">
                幕家居
            </div>
            <div class="dh">
                <ul>
                    <li>
                        <a href="">
                            <img src="./images/home-gry.png" alt="" srcset="">
                            <p>网站首页</p>
                        </a>              
                    </li>                  
                    <li>
                        <a href="">
                            <img src="./images/abouts-gry.png" alt="" srcset="">
                            <p>网站首页</p>
                        </a>              
                    </li>                  
                    <li>
                        <a href="">
                            <img src="./images/fuwu-gry.png" alt="" srcset="">
                            <p>网站首页</p>
                        </a>              
                    </li>                  
                    <li>
                        <a href="">
                            <img src="./images/chanpin-gry.png" alt="" srcset="">
                            <p>网站首页</p>
                        </a>              
                    </li>                  
                    <li>
                        <a href="">
                            <img src="./images/kefu-gry.png" alt="" srcset="">
                            <p>网站首页</p>
                        </a>              
                    </li>                  
                </ul>
            </div>
            <div class="ss">
                <input type="text" placeholder="请输入搜索内容">
                <button>
                    <img src="./images/sousuo.png" alt="" srcset="">
                </button>              
            </div>
        </div>
    </header>
    <!-- Banner区域 -->
    <section class="banner center-wrap clearfix" id="banner">
        <ul id="carousel_list" class="carousel_list">
            <li><img src="./images/banner01.png" alt="" srcset=""></li>
            <li><img src="./images/banner02.png" alt="" srcset=""></li>
            <li><img src="./images/banner03.png" alt="" srcset=""></li>          
        </ul>
        <ol class="circles" id="circles_ol">
            <li date-n="0" class="current"></li>
            <li date-n="1"></li>
            <li date-n="2"></li>
          </ol>        
    </section>
    <script src="./js/js.js"></script>
    <section class="center-wrap sp clearfix">
      <ul class="dw">
        <li><img src="./images/product01.png" alt="" srcset=""><p>时尚卫生间墙面颜色<br>
            2029装饰设计</p></li>
        <li><img src="./images/product02.png" alt="" srcset=""><p>现代北欧风格厨房装<br>
            2029饰效果图</p></li>
        <li><img src="./images/product03.png" alt="" srcset=""><p>现代时尚北欧风格卧<br>
            2029室装饰画</p></li>
        <li><img src="./images/product04.png" alt="" srcset=""><p>130平简约现代北欧<br>
            2029风格装修</p></li>
        <li><img src="./images/product05.png" alt="" srcset=""><p>130平简约现代北欧<br>
            2029风格装修</p></li> 
      </ul>
      <div class="left">
        <img src="./images/prev.png" alt="" srcset="">
      </div>
      <div class="right">
        <img src="./images/next.png" alt="" srcset="">
      </div>
      <p id="a">了解我们</p>
      <div class="x1"></div>
      <div class="x2"></div>
    </section>
</body>
</html>
1
尝试过的解决方式：几乎大区域都加了ov hi
小关酱_小白 2023-05-16
源自：“仿穷游”首页静态项目   5-2 项目作业
2
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕久久 2023-05-16 16:47:29

同学你好，代码不全，无法复现问题，建议把全部代码粘贴出来。另外，哪里的滚动条不出来？作业中，并没有滚动条效果呀！

祝学习愉快！

0
收起回答
  • 提问者 小关酱_小白 #1
    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
    // 轮播图的特效
    // 日期：2023-05-06
    // 姓名：关朝元
    (function() {
        // 得到元素
        var carousel_list = document.getElementById('carousel_list');
        var left_btn = document.getElementById('left_btn');
        var right_btn = document.getElementById('right_btn');
        var circles_ol = document.getElementById('circles_ol');
        var circles_list = circles_ol.getElementsByTagName('li');
        var banner = document.getElementById('banner');
        // 克隆第一张li
        var clone_li = carousel_list.firstElementChild.cloneNode(true);
        // 上树
        carousel_list.appendChild(clone_li);
     
        // 当前正在显示的图片序号，从0开始
        var idx=0;
        
        // 节流锁
        var lock = true;
        
        // 设置小圆点的current在谁身上，序号为idx的小圆点才有current类名，且其他的li都没有类名
        function setCircles(){
        //  遍历,遍历0、1 、2 、 3 、4。每遍历一个数字都要和idx比一下，如果相等，就把这项设置类名为current，否则去掉类名。   
        for(var i=0;i<=3;i++){
            // 这里的百分号5非常巧妙，1、 2、 3 、4除以5的余数都是它本身，但是5除以5的余数是0
            // 这里百分号5的目的就是为了右按钮它有一瞬间idx=5，500毫秒之后才变为0
            if(i==idx % 4){
                circles_list[i].className ='current';
            }else{
                circles_list[i].className ='';
            }
        }
        }
        // 事件委托，小圆点的监听
        circles_ol.onclick= function(e){
        if(e.target.tagName.toLowerCase()=='li'){
            // 得到这个li身上的date-n属性，就是n
            var n =Number(e.target.getAttribute('date-n'));
            // 改变全局idx
            idx = n;
            // 拉动
            carousel_list.style.transform = 'translateX('+ -25 * idx + '%)';
            // 调用改变小圆点函数
            setCircles();
        }
        }
    })

    在我的页面里新写的东西不显示

    2023-05-16 16:54:55
  • 好帮手慕久久 回复 提问者 小关酱_小白 #2

    不要给body设置超出隐藏，设置超出隐藏后，就会消掉滚动条了：

    https://img1.sycdn.imooc.com//climg/6463475609616cf006330192.jpg

    另外，如果之前没有提交过静态页面的作业，那么不要直接提交带js效果的作业。

    先让老师们帮你检查好结构和样式，再加js，否则你会很混乱。

    2023-05-16 17:05:44
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

关于滚动条更新
13 1 3
麻烦老师看一下我的这个页面怎么下面有滚动条, 滚动条拉过去, 右边是空白的, 这是怎么回事呀?
6 0 2
麻烦老师检查一哈，还有好像我的滚动条没显示出来？
3 0 4
为什么我这么写在线编辑器显示会出现滚动条
1 1 2
滚动条框没被隐藏
14 0 2

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

前端工程师
  • 参与学习           人
  • 提交作业       15698    份
  • 解答问题       17883    个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手 全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

了解课程

本课精华内容

问答 作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

201 5

老师给点提示。

155 1

查看更多本课问答
请稍等 ...
微信客服

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码