老师：慕云游有两个问题，在js里面写了
来源：1-1 课程简介
阿山123
2021-03-04 14:34:30
<!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>
<!-- 增加搜索引擎的权重 -->
<meta name="Keywords" content="机票，酒店，旅游签证，出国，自由行">
<meta name="Description" content="慕云游商城有十多年的旅游经验，为您提供全方位旅游服务">
<!-- 复位初始化的所有的标签的属性 -->
<link rel="stylesheet" href="
http://127.0.0.1:5500/慕云游/
css/resetcopy.css">
<!-- base是公共类 -->
<link rel="stylesheet" href="
http://127.0.0.1:5500/慕云游/
css/basecopy.css">
<!-- css是主类名 -->
<link rel="stylesheet" href="
http://127.0.0.1:5500/慕云游/
css/csscopy.css">
</head>
<body>
<div id="top_box" class="top_box">返回顶部</div>
<!-- 头部 -->
<header class="head-top">
<!-- 黑色导航 -->
<div class="black-nav">
<div class="center-wrap">
<!-- 左边 -->
<div class="black-nav-left">
<ul>
<li>
<a href="#">目的地</a>
</li>
<li>
<a href="#">锦囊</a>
</li>
<li class="have-menu">
<a href="#">社区</a>
<em class="menu">
<i></i>
<b></b>
</em>
<div class="gymenu sqmenu">
<ul>
<li><a href="#">旅行论坛</a></li>
<li><a href="#">旅行专栏</a></li>
<li><a href="#">旅行问答</a></li>
<li><a href="#">旅行生活分享平台</a></li>
<li><a href="#">JNE旅行生活美学</a></li>
<li><a href="#">Biu伴（原结伴同游)</a></li>
<li><a href="#">负责任的旅行</a></li>
<li><a href="#">特别策划</a></li>
</ul>
</div>
</li>
<li>
<a href="#">行程助手</a>
</li>
<li class="have-menu">
<a href="#">商城</a>
<em class="menu">
<i></i>
<b></b>
</em>
<div class="gymenu scmenu">
<!-- <div class="menu-inner"></div> -->
<ul>
<li><a href="#">机酒自由行</a></li>
<li><a href="#">当地玩乐</a></li>
<li><a href="#">签证</a></li>
<li><a href="#">保险</a></li>
<li><a href="#">租车自驾</a></li>
<li><a href="#">邮轮</a></li>
<li><a href="#">河轮</a></li>
<li><a href="#">私人订制</a></li>
<li><a href="#">欧洲铁路</a></li>
</ul>
</div>
</li>
<li class="have-menu">
<a href="#">酒店·民宿</a>
<em class="menu">
<i></i>
<b></b>
</em>
<div class="gymenu jdmenu">
<!-- <div class="menu-inner"></div> -->
<ul>
<li><a href="#">酒店</a></li>
<li><a href="#">爱彼迎</a></li>
<li><a href="#">华人旅馆</a></li>
</ul>
</div>
</li>
<li>
<a href="#">特价酒店</a>
</li>
</ul>
</div>
<!-- 右边 -->
<div class="black-nav-right">
<ul>
<li>
<a href="#" class="iconfont"></a>
</li>
<li>
<span style="color: aliceblue;">|</span>
</li>
<li>
<a href="#" class="iconfont"></a>
</li>
<li>
<a href="#" class="iconfont"></a>
</li>
<li>
<a href="#" class="iconfont"></a>
</li>
<li>
<a href="#">登录</a>
</li>
<li>
<a href="#">注册</a>
</li>
</ul>
</div>
</div>
</div>
<!-- <div class="qcfd"></div> -->
<!-- 绿色导航 -->
<div class="green-nav">
<div class="center-wrap">
<ul>
<li class="menu">
<a href="#">机酒自由行</a>
<div class="gymenu jjzymenu">
<p>全部</p>
<ul>
<li>
<a href="#">自由行</a>
</li>
<li>
<a href="#">优惠机票</a>
</li>
<li>
<a href="#">酒店</a>
</li>
<li>
<a href="#">邮轮</a>
</li>
<li>
<a href="#">定制游</a>
</li>
<li>
<a href="#">马尔代夫</a>
</li>
<li>
<a href="#">海岛游</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">优惠机票</a>
</li>
<li class="menu">
<a href="#">跟团游</a>
<div class="gymenu gtymenu">
<p>全部</p>
<ul>
<li>
<a href="#">跟团游</a>
</li>
<li>
<a href="#">半自助游</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">酒店</a>
</li>
<li class="menu">
<a href="#">当地玩乐</a>
<div class="gymenu ddwlmenu">
<p>全部</p>
<ul>
<li>
<a href="#">日游小团</a>
</li>
<li>
<a href="#">深度体验</a>
</li>
<li>
<a href="#">门票票券 </a>
</li>
<li>
<a href="#">餐饮美食</a>
</li>
<li>
<a href="#">WIFI电话卡</a>
</li>
<li>
<a href="#">购物</a>
</li>
<li>
<a href="#">交通票券</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">签证</a>
</li>
<li>
<a href="#">游轮</a>
</li>
<li>
<a href="#">河轮</a>
</li>
<li>
<a href="#">保险</a>
</li>
<li>
<a href="#">租车自驾</a>
</li>
<li class="menu">
<a href="#">深度旅游</a>
<div class="gymenu sdlvmenu">
<p>全部</p>
<ul>
<li>
<a href="#">CityWalk</a>
</li>
<li>
<a href="#">特色长线</a>
</li>
<li>
<a href="#">Q-Home </a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">私人定制</a>
</li>
</ul>
</div>
</div>
<!-- 白色导航 -->
<div class="white-nav">
<div class="center-wrap">
<h1>慕云游商城</h1>
<div class="soso">
<input type="text" placeholder="请输入目的地"><a href="" class="iconfont"></a>
</div>
</div>
</div>
</header>
<!-- banner -->
<div class="banner" id="banner">
<ul class="carousel_list" id="carousel_list">
<li>
<img src="http://127.0.0.1:5500/慕云游/images/banner1.jpg" alt="">
</li>
<li>
<img src="http://127.0.0.1:5500/慕云游/images/banner2.jpg" alt="">
</li>
<li>
<img src="http://127.0.0.1:5500/慕云游/images/banner3.jpg" alt="">
</li>
<li>
<img src="http://127.0.0.1:5500/慕云游/images/banner4.jpg" alt="">
</li>
<li>
<img src="http://127.0.0.1:5500/慕云游/images/banner5.jpg" alt="">
</li>
</ul>
<ul class="circles_list" id="circles_list">
<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>
</ul>
<div class="center-wrap">
<a href="javascript:;" id="leftbtn" class="leftbtn"></a>
<a href="javascript:;" id='rightbtn' class="rightbtn"></a>
<div class="banner-nav">
<ul id='chuizhi_caidan'>
<li data-n='0' class="hot cur" >
<dl>
<dt>热门出发地</dt>
<dd>
<span>北京</span>
<span>上海</span>
<span>广深</span>
<span>西南</span>
<span>国内其他</span>
</dd>
</dl>
</li>
<li class="gat" data-n='1'>
<dl>
<dt>港澳台 国内</dt>
<dd>
<span>香港</span>
<span>澳门</span>
<span>台湾</span>
<span>国内其他</span>
</dd>
</dl>
</li>
<li class="rh" data-n='2'>
<dl>
<dt>日本 韩国</dt>
<dd>
<span>东京</span>
<span>大阪</span>
<span>冲绳</span>
<span>北海道</span>
<span>福冈</span>
</dd>
</dl>
</li>
<li class="dny" data-n='3'>
<dl>
<dt>东南亚 南亚</dt>
<dd>
<span>泰国</span>
<span>新加坡</span>
<span>马来西亚</span>
<span>马尔代夫</span>
</dd>
</dl>
</li>
<li class="om" data-n='4'>
<dl>
<dt>欧洲 美洲</dt>
<dd>
<span>英国</span>
<span>法国</span>
<span>美国</span>
<span>加拿大</span>
</dd>
</dl>
</li>
<li class="ax" data-n='5'>
<dl>
<dt>澳新 中东非</dt>
<dd>
<span>澳大利亚</span>
<span>新西兰</span>
<span>迪拜</span>
</dd>
</dl>
</li>
</ul>
</div>
<!-- 右边 -->
<div class="banner-nav-right" id="banner_nav_right">
<div class="menu cur">
<dl>
<dt>港澳台</dt>
<dd>
<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>
</dd>
</dl>
<dl>
<dt>国内热门景点</dt>
<dd>
<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>
</dd>
</dl>
</div>
<div class="menu ">
<dl>
<dt>日本</dt>
<dd>
<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>
</dd>
</dl>
<dl>
<dt>
东南亚
</dt>
<dd>
<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>
</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>
</dd>
</dl>
<dl>
<dt>美洲</dt>
<dd>
<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>
</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>
</div>
</div>
<script >
// 轮播图特效
(function () {
// 得到元素
var carousel_list = document.getElementById('carousel_list');
var leftbtn = document.getElementById('leftbtn');
var rightbtn = document.getElementById('rightbtn');
var circles_list = document.getElementById('circles_list');
var lis = circles_list.getElementsByTagName('li');
var banner = document.getElementById('banner');
var top_box = document.getElementById('top_box');
var chuizhi_caidan = document.getElementById('chuizhi_caidan');
var chuizhi_caidan_lis = chuizhi_caidan.getElementsByTagName('li');
var banner_nav_right = document.getElementById('banner_nav_right');
var banner_nav_right_divs = banner_nav_right.getElementsByTagName('div');
console.log(banner_nav_right);
console.log(banner_nav_right_divs);
// **************************************
// 第一个问题：我鼠标悬停在文字上面的时候，就不显示右边的内容了
// 第二个问题是：这个cur chuizhi_caidan_lis[i].className += 'cur';怎么加不上去？
chuizhi_caidan.onmouseover = function (e) {
var n = e.target.getAttribute('data-n');
console.log(n);
console.log(11);
for (var i = 0; i < banner_nav_right_divs.length; i++) {
console.log(22);
console.log(n);
if (n == i) {
chuizhi_caidan_lis[i].className += 'cur';
banner_nav_right_divs[i].className = 'menu cur';
} else {
banner_nav_right_divs[i].className = '';
chuizhi_caidan_lis[i].className = chuizhi_caidan_lis[i].className
}
}
}
// 返回顶部
top_box.onclick = function () {
clearInterval(timer);
var timer = setInterval(function () {
document.documentElement.scrollTop -= 300;
if (document.documentElement.scrollTop <= 0) {
clearInterval(timer);
}
}, 20);
}
// 监听页面的滚动 一开始没有返回顶部，当移动了才会显示返回顶部
window.onscroll = function () {
var top = document.documentElement.scrollTop || window.scrollY;
if (top <= 0) {
top_box.style.display = 'none';
} else {
top_box.style.display = 'inline';
}
}
// 克隆第一张
var clone_li = carousel_list.firstElementChild.cloneNode(true);
// 上树
carousel_list.appendChild(clone_li);
// 当前正在显示的图片
var idx = 0;
var lock = true;
// 右边按钮点击事件
rightbtn.onclick = rightbtn_handler;
// 设置定时器
var timer = setInterval(function () {
rightbtn_handler();
}, 2000)
// 鼠标触碰清除定时器
banner.onmouseenter = function () {
clearInterval(timer);
}
// 鼠标离开开始定时器
banner.onmouseleave = function () {
clearInterval(timer);
timer = setInterval(rightbtn_handler, 2000);
}
function rightbtn_handler() {
// 节流锁
if (!lock) return;
// 关锁
lock = false;
idx++;
carousel_list.style.transition = 'all 0.5s linear 0s';
carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)';
if (idx > 4) {
setTimeout(function () {
// 去掉过渡
carousel_list.style.transition = 'none';
// 删除transform属性
carousel_list.style.transform = 'none';
idx = 0;
}, 500)
}
aa();
setTimeout(function () {
lock = true;
}, 500)
}
// 左边按钮点击事件
leftbtn.onclick = function () {
// 节流锁
if (!lock) return;
// 关锁
lock = false;
if (idx == 0) {
carousel_list.style.transition = 'none';
carousel_list.style.transform = 'translateX(' + -16.66 * 5 + '%)';
idx = 4;
setTimeout(function () {
carousel_list.style.transition = 'all 0.5s linear 0s';
carousel_list.style.transform = 'translateX(' + -16.66 * 4 + '%)';
}, 0)
} else {
idx--;
carousel_list.style.transition = 'all 0.5s linear 0s';
carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)';
}
aa();
// 500毫秒之后开锁
setTimeout(function () {
lock = true;
}, 500)
}
function aa() {
for (var i = 0; i <= 4; i++) {
if (i == idx % 5) {
lis[i].className = 'current';
} else {
lis[i].className = '';
}
}
}
circles_list.onclick = function (e) {
if (e.target.tagName.toLowerCase() == 'li') {
var n = e.target.getAttribute('data-n');
carousel_list.style.transform = 'translateX(' + -16.66 * n + '%)';
idx = n;
aa();
}
}
})();
</script>
</body>
</html>
2回答
-
好帮手慕张
2021-03-04
同学你好，问题解答如下：
1、由于同学只粘贴了html和js部分的代码，没有粘贴css样式代码，老师使用课程中css样式进行测试，发现没有cur类，建议同学将css代码粘贴上来。老师进行测试查找问题；
2、另外老师使用课程中的css代码测试，cur类是加上的，是一直在叠加的。
3、代码中存在的问题，建议同学将css代码粘贴上来后老师一起进行测试解决
祝学习愉快！
0 -
阿山123
提问者
2021-03-04
悬停文字 不显示右边的内容，悬停空白处才显示内容，我知道应该是dl的绝对定位把那部分给他压盖了，但是怎么解决？ 还有就是悬停Li的时候我的没有颜色变化？0
相似问题