图片轮播效果失效,不知道哪里出错了

图片轮播效果失效,不知道哪里出错了

//封装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

登陆购买课程后可参与讨论,去登陆

2回答
芝芝兰兰 2019-08-01 11:57:59

同学你好。这边尝试是没有问题的,猜测同学是没有同步进行如下修改:

http://img1.sycdn.imooc.com//climg/5d4263060001f90b06430268.jpg

http://img1.sycdn.imooc.com//climg/5d4263160001e16804830419.jpg

如果解答了同学的疑问,望采纳~

祝学习愉快~


芝芝兰兰 2019-07-31 14:19:07

同学你好。同学说的“失效”问题,是图片切换“闪烁”还是图片保持不动呢?

1、如果是保持不动,可能是CSS代码的位置在getElementById要获取的元素被加载完之前。

HTML 文档是由浏览器从上到下依次载入的,为避免 JavaScript 代码操作 HTML 元素时,HTML 元素还未载入而报错(对象不存在),因此需要将这段代码写到 HTML 元素后面。

所以如果要嵌入代码,建议同学将js放在body上方

http://img1.sycdn.imooc.com//climg/5d4132b300016b7005620190.jpg

2、如果是图片切换“闪烁”,目前的代码展示的效果,就是会有“闪烁”现象。后面老师将讲到清除定时器,届时效果会更加理想。


如果解答了同学的疑问,望采纳~

祝学习愉快~


  • 提问者 慕用1236393 #1
    是第一种情况,按照老师的方法改完以后,可以变换的,我还想问的是, <script type="text/javascript" src="script.js"></script> 这段不是应该写在head标签里吗
    2019-07-31 23:13:32
  • 提问者 慕用1236393 #2
    1.var pics=byId("banner"); var divNum=pics.getElementsByTagName("div"); 2.var pics=byId("banner").getElementsByTagName("div"); 老师,这两种方式出现的效果不一样,第一种的话,只能进行一轮图片轮播,而且,index会一直加一;第二种就是正确循环的; 请问老师这是怎么回事?
    2019-07-31 23:38:18
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10205    个

如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师