/* 懒人图库 搜集整理 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代码