8回答

好帮手慕糖

2017-09-06

已采纳

你好，你这是没有修改的吧，这个还是跟之前粘的代码一样呀，而且也没有报错呀啊，就是移出之后，颜色还是没有改变，下面是修改的代码，就是加个上面说的那段代码，你对比下吧。

// 封装一个代替getElementById()的方法
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.getElementsByClassName("inner-box"),
    menuItems = menu.getElementsByClassName("menu-item");
 
function slideImg(){
    var main = byId("main");
    // 滑过清除定时器，离开继续
    main.onmouseover =function(){
        // 滑过清除定时器
        if(timer) clearInterval(timer)
 
    }
    // 调用onmouseout事件
    main.onmouseout = function(){
        timer = setInterval(function(){
            index++;   // len = 3 0 1 2
            if(index >= len){
                index = 0;
            }
        // 切换图片,index为全局变量，不需要传参数
        changeImg();
        },3000);
    }
    //调用onmouseout方法，自动在main上触发鼠标离开的事件
    main.onmouseout(); 
 
    //遍历素有点击，且绑定点击事件，点击圆点切换图片
    for(var d=0;d<len;d++){
        // 给所有span添加一个id的属性值为d,作为当前span的索引
        dots[d].id = d;
        dots[d].onclick = function(){
            // 改变index为当前span的id值
            index = this.id;
            // 调用changeImg，实现切换图片
            changeImg();
        }
    }
    // 下一张
    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++){
        // 给每一个menu-item定义data-index属性，作为索引
        menuItems[m].setAttribute("data-index",m);
        menuItems[m].onmouseover =function(){
        subMenu.className ="sub-menu";
        var idx = this.getAttribute("data-index");
        // 遍历所有子菜单，将每一个都隐藏
        for(var j=0;j<innerBox.length;j++){
            innerBox[j].style.display = "none";
            menuItems[j].style.background = "none";
   
        }
        menuItems[idx].style.background ="rgba(0,0,0,0.1)";
            innerBox[idx].style.display = "block";
        }
         menuItems[m].onmouseout = function(){
            this.style.background = "rgba(0,0,0,0)";
         }
        }
} 
     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(){
    // 遍历banner下所有的div及dots下所有的span,将div隐藏，将span清除类
    for(var i=0;i<len;i++){
        pics[i].style.display ="none";
        dots[i].className ="";
    }
    // 根据index索引找到当前div和当前span，将其显示出来和设为当前
    pics[index].style.display = "block";
    dots[index].className = "active";
}
slideImg();

祝学习愉快~

0

OlafChou

提问者

2017-09-06

// 封装一个代替getElementById()的方法
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.getElementsByClassName("inner-box"),
	menuItems = menu.getElementsByClassName("menu-item");

function slideImg(){
	var main = byId("main");
	// 滑过清除定时器，离开继续
	main.onmouseover =function(){
		// 滑过清除定时器
		if(timer) clearInterval(timer)

	}
	// 调用onmouseout事件
	main.onmouseout = function(){
		timer = setInterval(function(){
			index++;   // len = 3 0 1 2
			if(index >= len){
				index = 0;
			}
		// 切换图片,index为全局变量，不需要传参数
		changeImg();
		},3000);
	}
	//调用onmouseout方法，自动在main上触发鼠标离开的事件
	main.onmouseout(); 

	//遍历素有点击，且绑定点击事件，点击圆点切换图片
	for(var d=0;d<len;d++){
		// 给所有span添加一个id的属性值为d,作为当前span的索引
		dots[d].id = d;
		dots[d].onclick = function(){
			// 改变index为当前span的id值
			index = this.id;
			// 调用changeImg，实现切换图片
			changeImg();
		}
	}
	// 下一张
	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++){
        // 给每一个menu-item定义data-index属性，作为索引
        menuItems[m].setAttribute("data-index",m);
        menuItems[m].onmouseover =function(){
        subMenu.className ="sub-menu";
        var idx = this.getAttribute("data-index");
        // 遍历所有子菜单，将每一个都隐藏
        for(var j=0;j<innerBox.length;j++){
            innerBox[j].style.display = "none";
            menuItems[j].style.background = "none";
  
        }
        menuItems[idx].style.background ="rgba(0,0,0,0.1)";
            innerBox[idx].style.display = "block";
        }
        // menuItems[m].onmouseout = function(){
        //     this.style.background = "rgba(0,0,0,0)";
        }
}

     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(){
	// 遍历banner下所有的div及dots下所有的span,将div隐藏，将span清除类
	for(var i=0;i<len;i++){
		pics[i].style.display ="none";
		dots[i].className ="";
	}
	// 根据index索引找到当前div和当前span，将其显示出来和设为当前
	pics[index].style.display = "block";
	dots[index].className = "active";
}

slideImg();

0

hlafChou

h 谢谢老师

h017-09-06

共1条回复

好帮手慕糖

2017-09-06

你好，你把你修改的代码整段贴上了的吧。祝学习愉快~

0

OlafChou

提问者

2017-09-05

还是没用。。。咋回事呢

0

好帮手慕糖

2017-09-05

你好，我测试的是可以的，现在把代码粘贴给你，你核对下：

for(var m=0;m<menuItems.length;m++){
        // 给每一个menu-item定义data-index属性，作为索引
        menuItems[m].setAttribute("data-index",m);
        menuItems[m].onmouseover =function(){
        subMenu.className ="sub-menu";
        var idx = this.getAttribute("data-index");
        // 遍历所有子菜单，将每一个都隐藏
        for(var j=0;j<innerBox.length;j++){
            innerBox[j].style.display = "none";
            menuItems[j].style.background = "none";
 
        }
        menuItems[idx].style.background ="rgba(0,0,0,0.1)";
            innerBox[idx].style.display = "block";
        }
        menuItems[m].onmouseout = function(){
            this.style.background = "rgba(0,0,0,0)";
        }
}

这样改的话，就是移入旁边的二级菜单上面的时候，也没有背景颜色了，不过你可以在设置下。

祝学习愉快~

0

hlafChou

h 好的，我回去试试

h017-09-05

共1条回复

好帮手慕糖

2017-09-05

你好，由于你只贴了部分的代码，我是在源码的基础上改的，你可以尝试添加的如下位置。

祝学习愉快~

0

hlafChou

h 我添加之后，显示115行的 slideImg(); 有问题

h017-09-05

共2条回复

好帮手慕糖

2017-09-04

你好，这里可以添加如下样式，

 menuItems[m].onmouseout = function(){
    this.style.background = "rgba(0,0,0,0)";
 }

祝学习愉快~

0

hlafChou

h 加在哪里啊，我加了，结果还是运行不了

h017-09-05

共1条回复

小丸子爱吃菜

2017-09-03

请将你的问题描述清除，如果是你的作业问题，可以将代码上传完整，便于我们运行并查找问题！

祝学习愉快！

0

hlafChou

h 还有就是代码超过8000，没法上传代码，求老师帮忙看看

h017-09-03

共2条回复