就是这一节的内容,自己稍作了下改变,但是一打开浏览器会报一个错误(谷歌浏览器报的错误是Failed to load resource: the server responded with a status of 404 (Not Found)),不能自动运行,只有鼠标出发一下,才会自动运行,可能我的代码本身就有问题,可是自己道行太浅,不知道怎么改。下面是html结构和
<body> <div class="notice" id="notice"> <div id="notice-tit" class="notice-tit"> <ul> <li class="select"><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> <div class="notice-con" id="notice-con"> <div class="mod"> <ul> <li><a href="#">1111111111111</a></li> <li><a href="#">1111111111111</a></li> <li><a href="#">1111111111111</a></li> <li><a href="#">1111111111111</a></li> </ul> </div> <div class="hidden"> <ul> <li><a href="#">2222222222222</a></li> <li><a href="#">2222222222222</a></li> <li><a href="#">2222222222222</a></li> <li><a href="#">2222222222222</a></li> </ul> </div> <div class="hidden"> <ul> <li><a href="#">3333333333333</a></li> <li><a href="#">3333333333333</a></li> <li><a href="#">3333333333333</a></li> <li><a href="#">3333333333333</a></li> </ul> </div> <div class="hidden"> <ul> <li><a href="#">4444444444444</a></li> <li><a href="#">4444444444444</a></li> <li><a href="#">4444444444444</a></li> <li><a href="#">4444444444444</a></li> </ul> </div> <div class="hidden"> <ul> <li><a href="#">5555555555555</a></li> <li><a href="#">5555555555555</a></li> <li><a href="#">5555555555555</a></li> <li><a href="#">5555555555555</a></li> </ul> </div> </div> </div> </body>
js代码:
var index=0;
var timer=null;
var notice_title = document.getElementById("notice-tit");
var tit_li=notice_title.getElementsByTagName("li");
var notice_con=document.getElementById("notice-con");
var con_divs=notice_con.getElementsByTagName("div");
//鼠标滑过,滑出事件绑定
function mainchange(){
if(timer){clearInterval(timer);timer=null;}//清除定时器
for(var i=0;i<tit_li.length;i++){
tit_li[i].id=i;
tit_li[i].onmouseover=function(){
clearInterval(timer);
changeClassName(this.id);
}
tit_li[i].onmouseout=function(){
timer=setInterval(autoplay,2000);
}
con_divs[i].onmouseover=function(){
clearInterval(timer);
}
con_divs[i].onmouseout=function(){
timer=setInterval(autoplay,2000);
}
}}
//自动切换事件
function autoplay(){
index++;
if(index>=tit_li.length){
index=0;
}
changeClassName(index);
}
//切换事件
function changeClassName(MyIndex){
console.log(MyIndex);
for(var k=0;k<tit_li.length;k++){
tit_li[k].className="";
con_divs[k].className="hidden";
}
tit_li[MyIndex].className="select";
con_divs[MyIndex].className="mod";
index=MyIndex;//使得当鼠标滑出后,继续按当前index向后切换
}
//添加自动运行事件
function addEventload(func){
oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
//运行
timer=setInterval(autoplay,2000);
addEventload(mainchange);JS不熟。