实用的js 焦点图切换效果 结构行为相分离
2010-06-09 10:41
946 查看
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<Num.length;i++) Num[i].className=(value==i)?"on":"";
}
function plays(value){//图片区域变换
try//try...catch 可以测试代码中的错误。try 部分包含需要运行的代码,而 catch 部分包含错误发生时运行的代码。
{
with (jfocuspic)//针对于IE添加滤镜效果;
{
filters[0].Apply();//在开始一个动态效果之前,先需要进行装备(Apply),Apply事件用来使一种滤镜效果生成。
for(i=0;i<Num.length;i++)i==value?children[i].style.display="block":children[i].style.display="none";
filters[0].play();//play()方法用于播放动态效果。在这之前,已经在#jfocus_pic样式中为图片层添加了滤镜样式;
}
}
catch(e)
{
for(i=0;i<Num.length;i++)
{
i==value?imglist[i].style.display="block":imglist[i].style.display="none";//使当前图片显示,隐藏其他图片;
}
}
}
function mouse(n){
for(var i=0;i<Num.length;i++){
(function(n){
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();//调用函数
相关文章推荐
- 实用的js 焦点图切换效果 结构行为相分离
- 实用的js 焦点图切换效果 结构行为相分离
- [分享] 实用的结构和行为相分离的标签切换
- javascript 封装的一个实用的焦点图切换效果
- JS实现图片高斯模糊切换效果的焦点图实例
- 一个js的tab切换效果代码[代码分离]
- 结构/表现/行为完全分离的选项卡(jquery版和原生JS版)
- [javascript] 封装一个实用的焦点图切换效果【转】
- 表现、结构、行为分离的选项卡效果
- JS+CSS实现淡入式焦点图片幻灯切换效果的方法
- javascript实现表现、结构、行为分离的选项卡效果!
- 结构/表现/行为完全分离的选项卡(jQ版和原生JS版)
- JS+CSS实现淡入式焦点图片幻灯切换效果的方法
- CSS+Js遮罩效果的TAB及焦点图片切换(推荐)
- 表现、结构、行为分离的选项卡效果
- javascript实现表现、结构、行为分离的选项卡效果!
- Web前端-JS效果-图片自动获取焦点与切换
- CSS+JS控制遮罩效果的TAB及焦点图片切换
- 兼容浏览器好的JS焦点图效果,适合各种图片切换效果
- 用js使行为与结构相分离