图片轮播效果失效,不知道哪里出错了
//封装document.getElementById();
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
//全局变量
var index=0,timer=null;
var pics=byId("banner").getElementsByTagName("div");
// var divNum=pics.getElementsByTagName("div");
var len=pics.length;
alert("sfsdf");
function slideImg(){
var main=byId("main");
//滑过清除定时器,离开继续
main.onmouseover=function(){
//滑过清除定时器
}
main.onmouseout=function(){
//间歇调用;setTimeout超时定时器
timer=setInterval(function(){
index++;
if(index>=len){
index=0;
}
//切换图片
changeImg();
},3000);
}
}
//切换图片函数
function changeImg(){
//遍历banner下多有的div,将其隐藏
for(var i=0;i<len;i++){
pics[i].style.display='none';
}
//根据index索引找到div,将其显示出来
pics[index].style.display='block';
}
slideImg();
正在回答 回答被采纳积分+1
同学你好。同学说的“失效”问题,是图片切换“闪烁”还是图片保持不动呢?
1、如果是保持不动,可能是CSS代码的位置在getElementById要获取的元素被加载完之前。
HTML 文档是由浏览器从上到下依次载入的,为避免 JavaScript 代码操作 HTML 元素时,HTML 元素还未载入而报错(对象不存在),因此需要将这段代码写到 HTML 元素后面。
所以如果要嵌入代码,建议同学将js放在body上方
2、如果是图片切换“闪烁”,目前的代码展示的效果,就是会有“闪烁”现象。后面老师将讲到清除定时器,届时效果会更加理想。
如果解答了同学的疑问,望采纳~
祝学习愉快~
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10205 个
如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星