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;}这两段是一起的,图片滚动几轮之后会崩溃,图片会乱飘。大神帮忙看看啊
添加回答
举报
0/150
提交
取消