/* 懶人圖庫 搜集整理 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代碼