/* 懒人图库 搜集整理 www.lanrentuku.com */*{ margin:0; padding:0; list-style:none;}#divSmallBox{overflow:hidden;*display:inline;*zoom:1;width:10px;height:10px;margin:0 5px;border-radius:10px;background:#ffffff;}#playBox{ width:1000px; height:409px; margin:20px auto; background:#333; position:relative; overflow:hidden;}#playBox .oUlplay { width:99999px; position:absolute; left:0; top:0;}#playBox .oUlplay li{ float:left;}#playBox .pre{ cursor:pointer; width:45px; height:45px; background:url(../images/l.png) no-repeat; position:absolute; top:190px; left:10px; z-index:10;}#playBox .next{ cursor:pointer; width:45px; height:45px; background:url(../images/r.png) no-repeat; position:absolute; top:190px; right:10px; z-index:10;}#playBox .smalltitle {width:1000px; height:10px; position:absolute; bottom:15px; z-index:10}#playBox .smalltitle ul{ width:120px; margin:0 auto;}#playBox .smalltitle ul li{ width:10px; height:10px; margin:0 5px; border-radius:10px; background:#ffffff; float:left; overflow:hidden;*display:inline;*zoom:1;}#playBox .smalltitle .thistitle{ background:#69aaec;}上面是css样式function getStyle(obj,name){ if(obj.currentStyle) { return obj.currentStyle[name] } else { return getComputedStyle(obj,false)[name] }}function getByClass(oParent,nClass){ var eLe = oParent.getElementsByTagName('*'); var aRrent = []; for(var i=0; i<eLe.length; i++) { if(eLe[i].className == nClass) { aRrent.push(eLe[i]); } } return aRrent;}function startMove(obj,att,add){ clearInterval(obj.timer) obj.timer = setInterval(function(){ var cutt = 0 ; if(att=='opacity') { cutt = Math.round(parseFloat(getStyle(obj,att))); } else { cutt = Math.round(parseInt(getStyle(obj,att))); } var speed = (add-cutt)/4; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cutt==add) { clearInterval(obj.timer) } else { if(att=='opacity') { obj.style.opacity = (cutt+speed)/100; obj.style.filter = 'alpha(opacity:'+(cutt+speed)+')'; } else { obj.style[att] = cutt+speed+'px'; } } },30)} window.onload = function() { var oDiv = document.getElementById('playBox'); var oPre = getByClass(oDiv,'pre')[0]; var oNext = getByClass(oDiv,'next')[0]; var oUlBig = getByClass(oDiv,'oUlplay')[0]; var aBigLi = oUlBig.getElementsByTagName('li'); var oDivSmall = getByClass(oDiv,'smalltitle')[0] var aLiSmall = oDivSmall.getElementsByTagName('li'); function tab() { for(var i=0; i<aLiSmall.length; i++) { aLiSmall[i].className = ''; } aLiSmall[now].className = 'thistitle' startMove(oUlBig,'left',-(now*aBigLi[0].offsetWidth)) } var now = 0; for(var i=0; i<aLiSmall.length; i++) { aLiSmall[i].index = i; aLiSmall[i].onclick = function() { now = this.index; tab(); } } oPre.onclick = function() { now-- if(now ==-1) { now = aBigLi.length; } tab(); } oNext.onclick = function() { now++ if(now ==aBigLi.length) { now = 0; } tab(); } var timer = setInterval(oNext.onclick,3000) //滚动间隔时间设置 oDiv.onmouseover = function() { clearInterval(timer) } oDiv.onmouseout = function() { timer = setInterval(oNext.onclick,3000) //滚动间隔时间设置 } }上面是js代码
添加回答
举报
0/150
提交
取消