代码如下:
代码如下:
.jfocus{width:300px;height:300px;border:#ccc 1px solid;background-color:#FFF;}
#jfocuspic{FILTER: progid:DXImageTransform.Microsoft.Fade (duration=0.5,overlap=1.0 );width:300px;height:200px;overflow:hidden;}
#jfocuspic a{display:none; font-size:2em; text-align:center; line-height:200px; font-weight:bold; background-color:#CCC; height:200px; cursor:pointer;}
#jfocusnum li{cursor:pointer;height:50px; width:50px; line-height:50px;display:inline-block; color:#000; border:#999 1px solid; text-align:center; background-color:#CCC; float:left; margin:0 5px;}
#jfocusnum li.on{color:#f00; font-weight:bold; border:#900 1px solid; font-size:14px;}
代码如下:
function $(id){return document.getElementById(id);}
var n=0;
var Num=$("jfocusnum").getElementsByTagName("li");
var imglist=$("jfocuspic").getElementsByTagName("a");
function setBg(value){//数字区域切换,给当前元素添加class类“on”,清除其他元素的类;
for(var i=0;i
function plays(value){//图片区域变换
try//try...catch 可以测试代码中的错误。try 部分包含需要运行的代码,而 catch 部分包含错误发生时运行的代码。
{
with (jfocuspic)//针对于IE添加滤镜效果;
{
filters[0].Apply();//在开始一个动态效果之前,先需要进行装备(Apply),Apply事件用来使一种滤镜效果生成。
for(i=0;i
}
}
catch(e)
{
for(i=0;i
i==value?imglist[i].style.display="block":imglist[i].style.display="none";//使当前图片显示,隐藏其他图片;
}
}
}
function mouse(n){
for(var i=0;i
Num[i].Onmouseover=imglist[i].Onmouseover=function(){clearInterval(autoStart);Mea(n);}//鼠标经过后停止自动切换,并给函数Mea()传递一个当前参数n
Num[i].Onmouseout=imglist[i].Onmouseout=function(){setAuto();}
})(i);
}
}
function Mea(value){
n=value;
mouse();
setBg(value);
plays(value);
}
function auto(){//参数n的递增使图片自动轮换的关键;
n++;
if(n>Num.length-1)n=0;
Mea(n);
}
function setAuto(){autoStart=setInterval("auto()", 2000)}//每隔2000毫秒,便执行一次auto()函数;每执行一次,参数n便递增1
setAuto();//调用函数
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]