老师，帮我找一下问题
HTML:如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播特效</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="main" id="main"> <div class="menu-box"> </div> <!--内容--> <div class="sub-menu hide" id="sub-menu"> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">手机、配件</div> <div class="sub-row"> <span class="bold mr10">手机通讯：</span> <a href="">手机</a> <span class="ml10 mr10">/</span> <a href="">手机维修</a> <span class="ml10 mr10">/</span> <a href="">以旧换新</a> </div> <div class="sub-row"> <span class="bold mr10">手机配件：</span> <a href="">手机壳</a> <span class="ml10 mr10">/</span> <a href="">手机存储卡</a> <span class="ml10 mr10">/</span> <a href="">数据线</a> <span class="ml10 mr10">/</span> <a href="">充电器</a> <span class="ml10 mr10">/</span> <a href="">电池</a> </div> <div class="sub-row"> <span class="bold mr10">运营商：</span> <a href="">中国联通</a> <span class="ml10 mr10">/</span> <a href="">中国移动</a> <span class="ml10 mr10">/</span> <a href="">中国电信</a> </div> <div class="sub-row"> <span class="bold mr10">智能设备：</span> <a href="">智能手环</a> <span class="ml10 mr10">/</span> <a href="">智能家居</a> <span class="ml10 mr10">/</span> <a href="">智能手表</a> <span class="ml10 mr10">/</span> <a href="">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">娱乐：</span> <a href="">耳机</a> <span class="ml10 mr10">/</span> <a href="">音响</a> <span class="ml10 mr10">/</span> <a href="">收音机</a> <span class="ml10 mr10">/</span> <a href="">麦克风</a> </div> </div> </div> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">电脑</div> <div class="sub-row"> <span class="bold mr10">电脑：</span> <a href="">笔记本</a> <span class="ml10 mr10">/</span> <a href="">平板</a> <span class="ml10 mr10">/</span> <a href="">一体机</a> </div> <div class="sub-row"> <span class="bold mr10">电脑配件：</span> <a href="">显示器</a> <span class="ml10 mr10">/</span> <a href="">CPU</a> <span class="ml10 mr10">/</span> <a href="">主板</a> <span class="ml10 mr10">/</span> <a href="">硬盘</a> <span class="ml10 mr10">/</span> <a href="">电源</a> <span class="ml10 mr10">/</span> <a href="">显卡</a> <span class="ml10 mr10">/</span> <a href="">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">游戏设备：</span> <a href="">游戏机</a> <span class="ml10 mr10">/</span> <a href="">耳机</a> <span class="ml10 mr10">/</span> <a href="">游戏软件</a> </div> <div class="sub-row"> <span class="bold mr10">网络产品：</span> <a href="">路由器</a> <span class="ml10 mr10">/</span> <a href="">网络机顶盒</a> <span class="ml10 mr10">/</span> <a href="">交换机</a> <span class="ml10 mr10">/</span> <a href="">存储卡</a> <span class="ml10 mr10">/</span> <a href="">网卡</a> </div> <div class="sub-row"> <span class="bold mr10">外部产品：</span> <a href="">鼠标</a> <span class="ml10 mr10">/</span> <a href="">键盘</a> <span class="ml10 mr10">/</span> <a href="">U盘</a> <span class="ml10 mr10">/</span> <a href="">移动硬盘</a> <span class="ml10 mr10">/</span> <a href="">鼠标垫</a> <span class="ml10 mr10">/</span> <a href="">电脑清洁</a> </div> </div> </div> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">家用电器</div> <div class="sub-row"> <span class="bold mr10">电视：</span> <a href="">国产品牌</a> <span class="ml10 mr10">/</span> <a href="">韩国品牌</a> <span class="ml10 mr10">/</span> <a href="">欧美品牌</a> </div> <div class="sub-row"> <span class="bold mr10">空调：</span> <a href="">显示器</a> <span class="ml10 mr10">/</span> <a href="">柜式</a> <span class="ml10 mr10">/</span> <a href="">中央</a> <span class="ml10 mr10">/</span> <a href="">壁挂式</a> </div> <div class="sub-row"> <span class="bold mr10">冰箱：</span> <a href="">多门</a> <span class="ml10 mr10">/</span> <a href="">对开门</a> <span class="ml10 mr10">/</span> <a href="">三门</a> <span class="ml10 mr10">/</span> <a href="">双门</a> </div> <div class="sub-row"> <span class="bold mr10">洗衣机：</span> <a href="">滚筒式洗衣机</a> <span class="ml10 mr10">/</span> <a href="">迷你洗衣机</a> <span class="ml10 mr10">/</span> <a href="">洗烘一体机</a> </div> <div class="sub-row"> <span class="bold mr10">厨房电器：</span> <a href="">油烟机</a> <span class="ml10 mr10">/</span> <a href="">洗碗机</a> <span class="ml10 mr10">/</span> <a href="">燃气灶</a> </div> </div> </div> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">家具</div> <div class="sub-row"> <span class="bold mr10">家纺：</span> <a href="">被子</a> <span class="ml10 mr10">/</span> <a href="">枕头</a> <span class="ml10 mr10">/</span> <a href="">四件套</a> <span class="ml10 mr10">/</span> <a href="">床垫</a> </div> <div class="sub-row"> <span class="bold mr10">灯具：</span> <a href="">台灯</a> <span class="ml10 mr10">/</span> <a href="">顶灯</a> <span class="ml10 mr10">/</span> <a href="">节能灯</a> <span class="ml10 mr10">/</span> <a href="">应急灯</a> </div> <div class="sub-row"> <span class="bold mr10">厨具：</span> <a href="">烹饪锅具</a> <span class="ml10 mr10">/</span> <a href="">餐具</a> <span class="ml10 mr10">/</span> <a href="">菜板刀具</a> </div> <div class="sub-row"> <span class="bold mr10">家装：</span> <a href="">地毯</a> <span class="ml10 mr10">/</span> <a href="">沙发垫套</a> <span class="ml10 mr10">/</span> <a href="">装饰字画</a> <span class="ml10 mr10">/</span> <a href="">照片墙</a> <span class="ml10 mr10">/</span> <a href="">窗帘</a> </div> <div class="sub-row"> <span class="bold mr10">生活日用：</span> <a href="">收纳用品</a> <span class="ml10 mr10">/</span> <a href="">浴室用品</a> <span class="ml10 mr10">/</span> <a href="">雨伞雨衣</a> </div> </div> </div> </div> <!-- 菜单 --> <div class="menu-content" id="menu-content"> <div class="menu-item"> <a href=""> <span>手机、配件</span> <i class="icon"></i> </a> </div> <div class="menu-item"> <a href=""> <span>电脑</span> <i class="icon"></i> </a> </div> <div class="menu-item"> <a href=""> <span>家用电器</span> <i class="icon"></i> </a> </div> <div class="menu-item"> <a href=""> <span>家具</span> <i class="icon"></i> </a> </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> </div> <!-- 上一张、和下一张按钮 --> <a href="javascript:void(0)" class="button prev" id="prev"></a> <a href="javascript:void(0)" class="button next" id="next"></a> <div class="dots" id="dots"> <span class="active"></span> <span></span> <span></span> </div> </div> <script type="text/javascript" src="js/script.js"></script> </body> </html>
CSS如下：
*{
padding: 0;
margin: 0;
}
@font-face {font-family: 'iconfont';
src: url('../img/font/iconfont.eot');
src: url('../img/font/iconfont.eot') format('embedded-opentype'),
url('../img/font/iconfont.woff') format('woff'),
url('../img/font/iconfont.ttf') format('truetype'),
url('../img/font/iconfont.svg#iconfont') format('svg');
}
ul{
list-style: none;
}
a:link,a:visited{
text-decoration: none;
color: #333;
}
body{
font-family: "微软雅黑";
color: #14191e;
}
.main{
width: 1200px;
height: 460px;
margin: 30px auto;
position: relative;
overflow: hidden;
}
.banner{
width: 1200px;
height: 460px;
overflow: hidden;
position: relative;
}
.banner-slide{
width: 1200px;
height: 460px;
position: absolute;
background-repeat: no-repeat;
display: none;
}
.slide-active{
display: block;
}
.slide1{
background-image: url("../img/bg1.jpg");
direction:
}
.slide2{
background-image: url("../img/bg2.jpg");
}
.slide3{
background-image: url("../img/bg3.jpg");
}
.button{
position: absolute;
width: 40px;
height: 80px;
left: 244px;
top:50%;
margin-top: -40px;
background:url("../img/arrow.png") no-repeat center center;
}
.button:hover{
background-color: #333;
opacity: 0.8;
filter: alpha(opacity=80);
}
.prev{
transform: rotate(180deg);
}
.next{
left: auto;
right: 0;
}
.dots{
position: absolute;
right: 0;
bottom: 24px;
text-align: right;
margin-right: 20px;
}
.dots span{
display: inline-block;
width: 12px;
height: 12px;
line-height: 12px;
border-radius: 50%;
background: rgba(7,17,27,0.4);
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
margin-left: 8px;
cursor: pointer;
}
.dots span.active{
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
background: #fff;
}
.menu-countent{
width: 244px;
height: 454px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
padding-top:6px;
}
.menu-box {
background:rgba(7, 17, 27, 0.5);
opacity: 0.5;
position: absolute;
left: 0px;
top: 0px;
width: 244px;
height: 460px;
z-index: 1;
}
.menu-item{
height: 64px;
line-height: 66px;
font-size: 16px;
cursor: pointer;
padding: 0 24px;
position: relative;
}
.menu-item a:link,.menu-item a:visited{
color: #fff;
}
.menu-item a{
display: block;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding: 0 8px;
height: 63px;
}
.menu-item i{
position: absolute;;
right: 32px;
font-size: 24px;
top:2px;
font-style: normal;
font-weight: normal;
color: rgba(255,255,255,0.5);
}
.sub-menu{
width: 730px;
height: 458px;
border-color: 1px solid #d9dde1;
background: #fff;
position: absolute;
left: 244px;
top: 0;
z-index: 999;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
}
.inner-box{
width: 100%;
height: 100%;
background: url(../img/fe.png) no-repeat;
display: none;
}
.sub-inner-box{
width: 652px;
margin-left: 40px;
overflow: hidden;
}
.title{
color: #f01414;
font-size: 16px;
line-height: 16px;
margin: 28px 0 30px 0;
font-weight: bold;
}
.sub-row{
margin-bottom: 25px;
}
.bold{
font-weight: bold;
}
.mr10{
margin: 10px;
}
.ml10{
margin: 10px;
}
.hide{
display: none;
}js如下：
// 获取ID元素封装函数
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
var index=0,
timer=null,
pics=byId("banner").getElementsByTagName("div"),
dots=byId("dots").getElementsByTagName("span"),
prev=byId("prev"),
next=byId("next"),
len=pics.length,
menu=byId("menu-content"),
subMenu=byId("sub-menu"),
innerBox=subMenu.getElementsByTagName("inner-box");
menuItems=menu.getElementsByTagName("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();
},1500);
}
main.onmouseout();
for(var d=0;d<len;d++){
dots[d].id=d;
dots[d].onclick=function(){
index=this.id;
changeImg();
// console.log(index);
}
}
// 下一张
next.onclick = function(){
index++;
if(index>=len){index=0;}
changeImg();
}
prev.onclick=function(){
index--;
if (index<0) {index=len-1;}
changeImg();
}
for (var m = 0; m<menuItems.length;m++) {
menuItems[m].setAttribute("data-index",m);
menuItems[m].onmouseover=function(){
var idx =this.getAttribute("data-index");
for(var j=0;j<innerBox.length;j++){
innerBox[j].style.display="none";
menuItems[j].style.background="none";
}
subMenu.className="sub-menu";
innerBox[idx].style.display="block";
}
menu.onmouseout=function(){
subMenu.className="sub-menu hide";
}
subMenu.onmouseover=function(){
this.className="sub-menu";
}
subMenu.onmouseout=function(){
this.className="sub-menu hide";
}
}
}
// 封装切换图片函数
function changeImg(){
for(var i=0;i<len;i++){
pics[i].style.display='none';
dots[i].className="";
}
pics[index].style.display='block';
dots[index].className="active";
}
slideImg();0
收起
正在回答
4回答
你好同学 , 对象是没有办法转换为数组的 . 如果你想把它当成一个数组 , 只有定义一个数组 ,把这个对象放在数组中 ,让它成为数组的元素 ,如下:
var arr=[subMenu]
但是这样做是没有什么意义的 ,图片轮播的案例中也不需要把subMenu转换为数组的 .
希望解答了你的疑惑 , 祝学习愉快 ,望采纳 .
好帮手慕夭夭
2019-02-01 16:04:13
你好同学 , 老师看了一下视频 , 并没有看到视频中使用索引查找subMenu . 不知道同学是不是对如下使用索引存在疑问:
这个同学需要区分一下 , 因为如下的DOM对象使用getElementsByTagName , js中getElementsByTagName或者getElementsByClassName获取的对象都放在一个类数组的集合中 ,所以要使用数组下标的方式获取 .
而像subMenu是使用getElementById获取的 . 因为id是唯一的 ,所以使用id获取的对象不会放在类数组结合中 ,它就是一个对象 ,所以你直接操作它即可 .
希望解答了你的疑惑 , 祝学习愉快 ,望采纳 .
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星