无限个数焦点图片javascript代码

时间：2010-09-11 来源：hlhcto

在做一个网站项目的时候要用到四个小图焦点图片切换大图的效果，因为小图中包含有产品的属性并且这些广告是由网站后台设定后才在首页显示，网上找了一些代码都不符合要求，只有自己写一个了；代码如下：

//在前台页面中用程序将图片路径从数据库中读出来并保存在数组中<script type="text/javascript">
var bigarr =Array();
bigarr[1]="/huayu/images/indexBanner/indexBanner04.jpg";
bigarr[2]="/huayu/images/indexBanner/indexBanner03.jpg";
bigarr[3]="/huayu/images/indexBanner/indexBanner02.jpg";
bigarr[4]="/huayu/images/indexBanner/indexBanner01.jpg";
</script>
//核心实现代码
var pubdex=0;//定义图片在数组中的索引
var oTimer = null;
function mousesetcls(dex,maxdex)//鼠标移动切换小图和大图
{
window.clearInterval(oTimer);
setcls(dex,maxdex);
}
function setcls(dex,maxdex) //切换小图和大图
{
pubdex=dex;//将当前图片索值保存到变量中,方便下面的代码调用
for (var i=1;i<=maxdex;i++)
{
if (i==dex)
{
document.getElementById("smallBox_"+i).className="smallBox_current";
document.getElementById("bigimg").src=bigarr[dex];
document.getElementById("bigimg_url").href=document.getElementById("gourl_"+i).value;
}
else
{
document.getElementById("smallBox_"+i).className="smallBox_normal";
}
}
}
//自动切换小图和大图
function autosetcls()
{
var maxnum=document.getElementById("admaxnum").value*1;
//if (document.getElementById("isauto").value==0) return;
var thisdex=pubdex+1;
if (thisdex>maxnum)
{
thisdex =1;
}
setcls(thisdex,maxnum)
}
function doautosetcls()
{
if (!document.getElementById("indexBanner")) return;
//document.getElementById("isauto").value=1;
oTimer=setInterval('autosetcls()',3000); //循环运行
}
function mouseout()
{
window.clearInterval(oTimer);
//setTimeout('doautosetcls()',3000)
doautosetcls();
}