为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我这个图片滚动会崩溃,帮帮忙啊

为什么我这个图片滚动会崩溃,帮帮忙啊

铃铛3 2016-11-05 16:55:54
 var oBanner = document.getElementById('banner'), oDiv = oBanner.getElementsByTagName('div')[0], oUl = oBanner.getElementsByTagName('ul')[0], num = 0, timer = null; imgUrl = ["images/banner-pic1.png","images/japan/japan-banner.png","images/case/banner.png"]; function load(){  for(var i=0;i<imgUrl.length;i++){   oDiv.innerHTML += "<a href='#'><img src='"+imgUrl[i]+"' alt='' /></a>";   oUl.innerHTML += "<li></li>";  } } function auto(){  load();  var aCir = oUl.getElementsByTagName('li'),   aImg = oDiv.getElementsByTagName('a');  aCir[num].style.background = "#1ab4c3";  rank();  timer = setInterval(abc,2000);  oDiv.onmouseover = function(){   clearInterval(timer);  }  oDiv.onmouseout = function(){   timer = setInterval(abc,2000);  }  for(var i=0;i<aCir.length;i++){   aCir[i].index = i;   aCir[i].onmouseover = function(){    clearInterval(timer);    for(var j=0;j<aCir.length;j++){     aCir[j].style.background = '#e5e5e5';    }    aCir[this.index].style.background = '#1ab4c3';    rank();    aImg[this.index].style.left = "0px";   }   aCir[i].onmouseout = function(){    num = this.index;    aImg[num].style.left = "0px";    aImg[(num+1)%aImg.length].style.left = "1000px";    timer = setInterval(abc,2000);   }  }  function abc(){   doMove(aImg[num%aImg.length],'left',100,-1000,function(){    aImg[num%aImg.length].style.left = '1000px';   });   doMove(aImg[(num+1)%aImg.length],'left',100,0,function(){    for(var i=0;i<aCir.length;i++){     aCir[i].style.background = '#e5e5e5';    }    num++;    num %= aImg.length;    aCir[num%aImg.length].style.background = '#1ab4c3';   });  }  function rank(){   for(var i=0;i<imgUrl.length;i++){    aImg[i].index = i;    aImg[i].style.left = i*1000+'px';    if(parseInt(getStyle(aImg[i],'left')) > '1000'){     aImg[i].style.left = '1000px';    }   }  } } auto();function doMove(obj,arrt,dir,target,endFn){ clearInterval(obj.timer); dir = parseInt(getStyle( obj,arrt )) > target ? -dir : dir; obj.timer = setInterval(function (){  var speed = parseInt(getStyle( obj,arrt )) + dir ;  if( speed > target&&dir > 0 || speed < target&&dir < 0 ){   speed = target;  }  obj.style[arrt] = speed + 'px';  if(speed === target){   clearInterval(obj.timer);   endFn&&endFn();  } },50)}function changeOpacity(obj,dir,target,endFn){ clearInterval(obj.opa); dir = parseFloat(getStyle( obj,'opacity' )) > target ? -dir : dir; obj.opa = setInterval(function (){  var speed = parseFloat(getStyle( obj,'opacity' )) + dir ;  if( speed > target&&dir > 0 || speed < target&&dir < 0 ){   speed = target;  }  obj.style.opacity = speed;  if(speed === target){   clearInterval(obj.opa);   endFn&&endFn();  } },200)}function getShake(){ var _this = this; shake( _this,'top' );}function shake(obj,arrt,endFn){ clearInterval(obj.shake); var arr = [],  num = 0;  pos = parseInt(getStyle(obj,arrt)); for(var i = 20;i>0;i-=2){  arr.push(i,-i); } arr.push(0); if(obj.onOff){  obj.onOff = false;  obj.shake = setInterval(function(){   obj.style[arrt] = pos + arr[num] + 'px';   num++;   if(num === arr.length){    clearInterval(obj.shake);    num = 0;    obj.onOff = true;    endFn&endFn();   } },50) }}function toTwo(n){ return n<10?"0"+n:""+n;}function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];} <div class="banner" id="banner"> <div></div> <ul></ul> </div>.banner { width: 100%; background: #e3ebee; margin-bottom: 30px;}.banner>img { display: block; width: 1000px; margin: 0 auto;}这两段是一起的,图片滚动几轮之后会崩溃,图片会乱飘。大神帮忙看看啊
查看完整描述

1 回答

?
qq_sU_4

TA贡献30条经验 获得超6个赞

结构代码呢。。。

查看完整回答
反对 回复 2016-11-05
  • 1 回答
  • 0 关注
  • 1286 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信