小圆点事件委托不生效，控制台未报错，请老师看下
来源：2-4 代码编写（2）
我不是胖球球
2021-06-21 13:15:52
相关代码：index.html
<!DOCTYPE html>
<html>
<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>
<meta name="keywords" content="机票，酒店，旅游攻略，签证，出国，自由行">
<meta name="Description" content="慕云游商城有十多年旅游行业服务经验，为您提供全方位旅游服务">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- banner部分 -->
<section class="banner">
<ul id="carousel_list" class="carousel_list" >
<li>
<img src="images/banner1.jpg" alt="">
</li>
<li>
<img src="images/banner2.jpg" alt="">
</li>
<li>
<img src="images/banner3.jpg" alt="">
</li>
<li>
<img src="images/banner4.jpg" alt="">
</li>
<li>
<img src="images/banner5.jpg" alt="">
</li>
</ul>
<ol class="circles" id="circle_ol">
<li data-n="0" class="current"></li>
<li data-n="1"></li>
<li data-n="2"></li>
<li data-n="3"></li>
<li data-n="4"></li>
</ol>
<div class="center-wrap">
<a href="javascript:;" id="left_btn" class="leftbtn"></a>
<a href="javascript:;" id="right_btn" class="rightbtn"></a>
<nav class="banner-nav">
<!-- banner左侧 -->
<ul>
<li class="hot">
<dl>
<dt>热门出发地</dt>
<dd>
<em>上海</em>
<em>广深</em>
<em>西南</em>
<em>国内其他</em>
</dd>
</dl>
</li>
<li class="hk">
<dl>
<dt>港澳台 国内</dt>
<dd>
<em>香港</em>
<em>澳门</em>
<em>台湾</em>
<em>国内其他</em>
</dd>
</dl>
</li>
<li class="jp">
<dl>
<dt>日本 韩国</dt>
<dd>
<em>东京</em>
<em>大阪</em>
<em>冲绳</em>
<em>北海道</em>
<em>福冈</em>
</dd>
</dl>
</li>
<li class="as">
<dl>
<dt>东南亚 南亚</dt>
<dd>
<em>泰国</em>
<em>新加披</em>
<em>马来西亚</em>
<em>马尔代夫</em>
</dd>
</dl>
</li>
<li class="eu">
<dl>
<dt>欧洲 美洲</dt>
<dd>
<em>英国</em>
<em>法国</em>
<em>美国</em>
<em>加拿大</em>
</dd>
</dl>
</li>
<li class="au">
<dl>
<dt>澳新 中东非</dt>
<dd>
<em>澳大利亚</em>
<em>新西兰</em>
<em>迪拜</em>
</dd>
</dl>
</li>
</ul>
<!-- banner右侧，有6个盒子 -->
<div class="menus-box">
<div class="menu">
<dl>
<dt>港澳台</dt>
<dd>
<a href="">香港</a>
<a href="">澳门</a>
<a href="">台北</a>
<a href="">高雄</a>
<a href="">香港迪士尼</a>
<a href="">香港海洋公园</a>
<a href="">交通接驳</a>
<a href="">澳门塔</a>
<a href="">新濠天地水舞间</a>
<a href="">澳门豪华自助</a>
<a href="">台北101</a>
<a href="">台湾美食</a>
</dd>
</dl>
<dl>
<dt>国内热门城市</dt>
<dd>
<a href="">三亚</a>
<a href="">东北雪乡</a>
<a href="">大理</a>
<a href="">丽江</a>
<a href="">昆明</a>
<a href="">西双版纳</a>
<a href="">拉萨</a>
<a href="">成都</a>
<a href="">重庆</a>
<a href="">长白山</a>
<a href="">厦门</a>
<a href="">长沙</a>
<a href="">桂林</a>
<a href="">北京</a>
<a href="">西安</a>
<a href="">敦煌</a>
<a href="">杭州</a>
<a href="">上海</a>
<a href="">无锡</a>
<a href="">南京</a>
<a href="">广州</a>
<a href="">黄山</a>
<a href="">莫干山</a>
<a href="">新疆</a>
<a href="">北海</a>
<a href="">九黄山</a>
<a href="">太原</a>
<a href="">张家口</a>
</dd>
</dl>
<dl>
<dt>国内热门景点</dt>
<dd>
<a href="">北京故宫</a>
<a href="">东北滑雪</a>
<a href="">恭王府</a>
<a href="">长城</a>
<a href="">青城山大熊猫基地</a>
<a href="">峨眉山</a>
<a href="">都江堰</a>
<a href="">长恨歌表演</a>
<a href="">兵马俑</a>
<a href="">大唐芙蓉园</a>
<a href="">三亚日游</a>
<a href="">厦门鼓浪屿</a>
<a href="">千岛湖</a>
<a href="">呼伦贝尔草原</a>
<a href="">希拉穆仁草原</a>
<a href="">大理日游</a>
<a href="">杭州</a>
<a href="">重庆两江夜游船票</a>
</dd>
</dl>
</div>
<div class="menu">
<dl>
<dt>港澳台</dt>
<dd>
<a href="">香港</a>
<a href="">澳门</a>
<a href="">台北</a>
<a href="">高雄</a>
<a href="">香港迪士尼</a>
<a href="">香港海洋公园</a>
<a href="">交通接驳</a>
<a href="">澳门塔</a>
<a href="">新濠天地水舞间</a>
<a href="">澳门豪华自助</a>
<a href="">台北101</a>
<a href="">台湾美食</a>
</dd>
</dl>
</div>
<div class="menu">
<dl>
<dt>日本</dt>
<dd>
<a href="">东京</a>
<a href="">大阪</a>
<a href="">冲绳</a>
<a href="">北海道</a>
<a href="">札幌</a>
<a href="">京都</a>
<a href="">名古屋</a>
<a href="">福冈</a>
<a href="">长崎</a>
<a href="">鹿儿岛</a>
<a href="">JR Pass</a>
<a href="">米其林餐厅</a>
<a href="">东京迪士尼</a>
<a href="">大阪环球影城</a>
<a href="">冲绳一日游</a>
<a href="">City Walk</a>
<a href="">西瓜卡</a>
<a href="">京都日游</a>
<a href="">和服体验</a>
<a href="">包车服务</a>
<a href="">富士山日游</a>
</dd>
</dl>
</div>
<div class="menu current">
<dl>
<dt>泰新马</dt>
<dd>
<a href="">普吉岛</a>
<a href="">清迈</a>
<a href="">曼谷</a>
<a href="">苏梅岛</a>
<a href="">甲米</a>
<a href="">芭提雅</a>
<a href="">拜县</a>
<a href="">新加坡</a>
<a href="">马来西亚</a>
<a href="">沙巴</a>
<a href="">吉隆坡</a>
<a href="">皇帝岛</a>
<a href="">泰国人妖</a>
<a href="">泰国丛林飞跃</a>
<a href="">泰国spa按摩</a>
<a href="">清迈夜间动物园</a>
<a href="">泰拳表演</a>
<a href="">清莱一日游</a>
<a href="">新加坡环球影城</a>
<a href="">新加坡日游</a>
<a href="">新加坡滨海湾花园</a>
<a href="">沙巴美人鱼岛</a>
<a href="">沙巴红树林萤火虫</a>
</dd>
</dl>
<dl>
<dt>东南亚</dt>
<dd>
<a href="">巴厘岛</a>
<a href="">长滩岛</a>
<a href="">马尼拉</a>
<a href="">薄荷岛</a>
<a href="">美娜多芽庄</a>
<a href="">岘港</a>
<a href="">富国岛</a>
<a href="">柬埔寨</a>
<a href="">缅甸</a>
<a href="">老挝</a>
<a href="">文莱</a>
<a href="">蓝梦岛</a>
<a href="">巴厘岛SPA</a>
<a href="">网红漂浮下午茶</a>
<a href="">珍珠岛游乐园</a>
<a href="">富国岛浮潜海豹</a>
<a href="">吴哥窟</a>
<a href="">西哈努克</a>
</dd>
</dl>
<dl>
<dt>南亚 西亚</dt>
<dd>
<a href="">马尔代夫</a>
<a href="">斯里兰卡</a>
<a href="">印度</a>
<a href="">格鲁尼亚阿塞拜疆</a>
<a href="">亚美尼亚</a>
</dd>
</dl>
</div>
<div class="menu">
<dl>
<dt>欧洲</dt>
<dd>
<a href="">法国</a>
<a href="">意大利</a>
<a href="">土耳其</a>
<a href="">俄罗斯</a>
<a href="">西班牙</a>
<a href="">瑞士</a>
<a href="">英国</a>
<a href="">希腊</a>
<a href="">荷兰</a>
<a href="">德国</a>
<a href="">捷克</a>
<a href="">葡萄牙</a>
<a href="">瑞典</a>
<a href="">丹麦</a>
<a href="">挪威</a>
<a href="">冰岛</a>
<a href="">芬兰</a>
<a href="">罗瓦涅米</a>
<a href="">奥斯陆</a>
<a href="">雷克雅未克</a>
<a href="">因克拉肯</a>
<a href="">巴塞罗那</a>
<a href="">伦敦</a>
<a href="">巴黎</a>
<a href="">塞纳河</a>
<a href="">慕尼黑</a>
<a href="">普罗旺斯</a>
<a href="">温莎日游</a>
<a href="">巴黎迪斯尼</a>
<a href="">伊斯坦布</a>
<a href="">尔阿尔罕布拉宫</a>
<a href="">唐顿庄园</a>
<a href="">埃菲尔铁塔</a>
<a href="">凡尔赛宫</a>
<a href="">北欧破冰船</a>
<a href="">极光之旅</a>
<a href="">英国天空岛</a>
</dd>
</dl>
<dl>
<dt>美洲</dt>
<dd>
<a href="">美国</a>
<a href="">加拿大</a>
<a href="">墨西哥</a>
<a href="">巴西</a>
<a href="">阿根廷</a>
<a href="">智利</a>
<a href="">秘鲁</a>
<a href="">玻利维亚</a>
<a href="">洛杉矶</a>
<a href="">纽约</a>
<a href="">拉斯维加斯</a>
<a href="">旧金山</a>
<a href="">圣地亚哥</a>
<a href="">芝加哥</a>
<a href="">西雅图</a>
<a href="">华盛顿</a>
<a href="">奥兰多</a>
<a href="">夏威夷</a>
<a href="">塞班岛</a>
<a href="">关岛</a>
<a href="">环球影城</a>
<a href="">迪士尼演出票</a>
<a href="">尼亚加拉大瀑布</a>
<a href="">帝国大厦</a>
<a href="">奥特莱斯</a>
<a href="">黄石国家公园</a>
<a href="">纽约大都会博物馆</a>
<a href="">美国大峡谷西峡</a>
<a href="">拉斯维加斯摩天轮</a>
<a href="">羚羊峡谷+马蹄湾</a>
</dd>
</dl>
</div>
<div class="menu">
<dl>
<dt>澳新 南太平洋</dt>
<dd>
<a href="">墨尔本</a>
<a href="">悉尼</a>
<a href="">黄金海岸</a>
<a href="">凯恩斯</a>
<a href="">布里斯班奥兰卡</a>
<a href="">斐济</a>
<a href="">珀斯</a>
<a href="">圣灵群岛</a>
<a href="">大堡礁</a>
<a href="">墨尔本之星</a>
<a href="">悉尼热气球</a>
<a href="">水上飞机</a>
<a href="">海港大桥</a>
<a href="">皇后镇霍比特人村</a>
<a href="">怀托莫萤火虫洞</a>
<a href="">摩尔福德峡湾</a>
<a href="">新西兰滑雪</a>
<a href="">瓦纳卡</a>
</dd>
</dl>
<dl>
<dt>中东非</dt>
<dd>
<a href="">迪拜</a>
<a href="">摩洛哥</a>
<a href="">毛里求斯</a>
<a href="">埃及</a>
<a href="">塞舌尔</a>
<a href="">马达加斯加</a>
<a href="">以色列</a>
<a href="">肯尼亚</a>
<a href="">南非</a>
<a href="">伊朗</a>
<a href="">约旦</a>
<a href="">突尼斯</a>
<a href="">埃法拉利主题公园</a>
<a href="">迪拜七星帆船酒店用餐</a>
<a href="">夜游迪拜河</a>
<a href="">亚特兰蒂斯水上乐园</a>
<a href="">动物大迁徙</a>
<a href="">撒哈拉沙漠</a>
<a href="">金字塔</a>
<a href="">纳米比亚</a>
</dd>
</dl>
</div>
</div>
</nav>
</div>
</section>
<script src="js/carousel.js"></script>
</body>
</html>
相关代码：css.css
/* 大banner布局 */
.banner {
position: relative;
/* overflow: hidden; */
}
/* 制作banner特效之后不需要此布局了 */
/* .banner img { */
/* banner图宽度为浏览器窗口的100% */
/* width: 100%; */
/* 使用新的属性min-widtn，这个属性表示限制最小宽度为1152px */
/* min-width: 1152px; */
/* 图片可能和盒子底部产生缝隙，此时可以使用 压盖小技巧 */
/* 垂直居中，这是一个小技巧，添加之后就不会产生缝隙 */
/* vertical-align: middle; */
/* } */
.banner .carousel_list {
width: 600%;
/* 清除浮动 */
overflow: hidden;
/* translateX中的百分数表示相对于它本身的宽度的多少倍 */
/* transform: translateX(-16.66%); */
/* 加上过渡属性 */
transition: transform 0.5s ease 0s;
}
.banner .carousel_list li {
float: left;
width: 16.66%;
/* z-index: 0; */
}
.banner .carousel_list li img {
width: 100%;
/* 白边的处理方法 */
vertical-align: middle;
}
/* 实现压盖，版芯需要绝对定位 */
.banner .center-wrap {
/* 只要有压盖，第一时间 就要想到绝对定位 */
position: absolute;
top: 0;
left: 0;
/* width: 1152px; */
left: 50%;
margin-left: -576px;
/* 这里的100%高度不能省略，因为如果省略了，它的height就是0 */
/*那么它的子盒子设置16.6%就没有意义了 */
height: 100%;
/* background-color: rgba(110, 85, 85, 0.26); */
}
.banner .center-wrap .banner-nav {
/* 这里的100%高度不能省略，因为如果省略了，它的height就是0 */
/*那么它的子盒子设置16.6%就没有意义了 */
height: 100%;
}
.banner .center-wrap .banner-nav>ul {
/* 这里的100%高度不能省略，因为如果省略了，它的height就是0 */
/*那么它的子盒子设置16.6%就没有意义了 */
height: 100%;
}
.banner .center-wrap .banner-nav>ul>li {
height: 16.66%;
width: 296px;
background-color: rgba(0,0,0,0.43);
/* box-sizing: border-box;属性的作用就是让height属性是盒子的总高度，这种情况：在盒子的高度是百分比写的，但是盒子有边框的时候 */
/* 此时就要让盒子的边框涵盖再height里面，就要使用box-sizing属性 */
box-sizing: border-box;
border-bottom: 1px solid #9e9e9e;
}
.banner .center-wrap .banner-nav>ul>li:last-child {
border-bottom: none;
}
.banner .center-wrap .leftbtn {
position: absolute;
width: 28px;
height: 44px;
/* background-color: rgb(206, 148, 23); */
/* 使用精灵 */
background: url(../images/icons.png) no-repeat -43px -130px;
top: 50%;
margin-top: -22px;
left: -40px;
border-radius: 10%;
}
.banner .center-wrap .leftbtn:hover, .banner .center-wrap .rightbtn:hover {
/* 鼠标触碰按钮，透明度变低 */
opacity: .8;
}
.banner .center-wrap .rightbtn {
position: absolute;
width: 28px;
height: 44px;
/* background-color: rgb(206, 148, 23); */
/* 使用精灵 */
background: url(../images/icons.png) no-repeat -43px -37px;
top: 50%;
margin-top: -22px;
right: -40px;
border-radius: 10%;
}
/* li文字垂直居中 */
.banner .center-wrap .banner-nav>ul>li {
position: relative;
}
.banner .center-wrap .banner-nav>ul>li dl {
position: absolute;
height: 48px;
top: 50%;
left: 40px;
margin-top: -24px;
color: white;
}
.banner .center-wrap .banner-nav>ul>li dt {
font-size: 18px;
height: 26px;
/* 行高等于盒子高 */
line-height: 26px;
}
.banner .center-wrap .banner-nav>ul>li dt dd {
font-size: 16px;
height: 22px;
/* 行高等于盒子高 */
line-height: 22px;
}
/* 使用精灵制作小图标 */
/* 共性 */
.banner .center-wrap .banner-nav>ul>li::before {
content: '';
position: absolute;
background: url(../images/icons.png);
top: 50%;
left: 10px;
width: 24px;
height: 24px;
margin-top: -12px;
}
/* 个性 */
.banner .center-wrap .banner-nav>ul>li.hot::before {
background-position: -37px -223px;
margin-top: -12px;
}
.banner .center-wrap .banner-nav>ul>li.hk::before {
background-position: -37px -266px;
}
.banner .center-wrap .banner-nav>ul>li.jp::before {
background-position: -37px -315px;
}
.banner .center-wrap .banner-nav>ul>li.as::before {
background-position: -37px -368px;
}
.banner .center-wrap .banner-nav>ul>li.eu::before {
background-position: -37px -414px;
}
.banner .center-wrap .banner-nav>ul>li.au::before {
background-position: -37px -459px;
}
/* banner右侧 */
.banner .center-wrap .banner-nav .menus-box .menu {
/* 让所有menu都隐藏 */
display: none;
position: absolute;
left: 296px;
width: 324px;
height: 100%;
top: 0;
background-color: rgba(0,0,0,0.58);
color: white;
padding: 16px;
/* 加上box-sizing属性之后，高度100%就是盒子总高，不需要再 设置padding-bottom：none */
box-sizing: border-box;
}
/* 有current的menu会显示 */
.banner .center-wrap .banner-nav .menus-box .menu.current {
/* display: block; */
}
/* section .banner .center-wrap .banner-nav .menu-box .menu {
position: absolute;
} */
.banner .center-wrap .banner-nav .menus-box a {
color: white;
}
.banner .center-wrap .banner-nav .menus-box dl {
margin-bottom: 16px;
}
.banner .center-wrap .banner-nav .menus-box dl dt {
line-height: 30px;
font-size: 18px;
}
.banner .center-wrap .banner-nav .menus-box dl dd {
line-height: 22px;
font-size: 14px;
}
.banner .circles {
width: 160px;
height: 20px;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -80px;
z-index: 9999;
}
.banner .circles li {
float: left;
width: 20px;
height: 20px;
background-color: #20BD9A;;
margin-right: 10px;
border-radius: 10px;
/* 小圆点也可以添加过渡属性 */
transition: all .5s ease 0s;
/* 鼠标指针变为小手状 */
cursor: pointer;
}
.banner .circles li:last-child {
margin-right: 0;
}
.banner .circles li.current {
width: 40px;
background-color: #15967a;
}
相关代码：base.css
.clearfix {
overflow: hidden;
}
.clearfix::after {
content: '';
display: block;
clear: both;
overflow: hidden;
}
@font-face {
font-family: PingFangSC-Regular;
src: url('../fonts/PingFangSCRegular.ttf') format('turetype');
}
/* 定义字体图标 */
@font-face {
font-family: 'iconfont';
src: url(../fonts/iconfont.ttf) format('truetype');
src: url(../fonts/iconfont.woff) format('woff');
src: url(../fonts/iconfont.woff2) format('woff2');
}
/* 定义iconfont的样式 */
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: PingFangSC-Regular;
}
/* 元素居中 wrap表示包容器*/
.center-wrap {
width: 1152px;
margin: 0 auto;
}
/* 不建议使用原子类，类名丑陋且 长 */
/* .mgt10 {
margin-top: 10px;
}
.mgt12 {
margin-top: 12px;
}
.mgt14 {
margin-top: 14px;
} */
/* 文字居中 */
.tac {
text-align: center;
}
/* 转块 */
.db {
display: block;
}
/* 转行内块 */
.dib {
display: inline-block;
}
相关代码：reset.css
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}a{text-decoration: none;}
写回答
1回答
-
同学你好，没有粘贴js代码，老师这边不能准确的找到原因，建议把js代码粘贴上来，老师帮助测试，祝学习愉快~
0
相似问题