滚动条没出来
<!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>
尝试过的解决方式：几乎大区域都加了ov hi
2
收起
正在回答 回答被采纳积分+1
1回答
-
小关酱_小白 #1
// 轮播图的特效 // 日期：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
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星