老邦LAOBANG 西方不无 着力即差...
三屏js+滤镜效果(js定义类应用与实例)焦点图
发表于: | 分类: 低端技术 | 评论:0

三屏js+滤镜效果(js定义类应用与实例)焦点图,这个是很久以前写的,为了充斥下博客内容所以就贴了上来,高手勿怪。

function $(id){return document.getElementById(id);}

//imglist Array 图片信息

//imgalt Array 图片描述信息

//imgjup Array点击图片跳转地址

//cid 显示图片容积ID

//Meauid 菜单ID

function cruttImg(imglist,imgalt,imgjup,Meauid,cid){

var ImgList=imglist;

var imgAlt=imgalt;

var imgJup=imgjup;

var meauBox=$(Meauid);

var spit=2800; //自动播放间隔时间

var dq=0; //当前显示图片(index)

$(cid).src=ImgList[dq]; //初始时显示第一张图片

$(cid).onmouseover=function(){clearInterval(a)}; //鼠标经过时暂停自动播放

$(cid).onmouseout=function(){auto();} //鼠标移开开始自动播放

$(cid).style.cursor="pointer";

/*创建菜单*/

for(j=0;j

var newLi=document.createElement("li");

var newImg=document.createElement("img");

newImg.setAttribute('src',ImgList[j]); //初始菜单显示图片

newLi.appendChild(newImg);

meauBox.appendChild(newLi);

}

/*初始菜单*/

var meauLis=meauBox.getElementsByTagName("li");//获得菜单项

for(i=0;i

if(meauLis[i].id!="nothis"){//判断是不是菜单

meauLis[i].onclick=function(){ //给菜单项添加单击事件

try{$($(cid)).filters[0].Apply(); //指定滤镜

$(cid).filters[0].Play();}catch(err){} //开始滤镜

$(cid).src=this.childNodes[0].src; //指定点击时显示的焦点图

this.className="ov";

for(x=0;x

dq=parseInt(this.id);

$(cid).onclick=function(){//给焦点图添加点击事件

open(imgJup[(dq)],'','');}

}}}

/*初始自动播放*/

var Intail=function(){

try{$(cid).filters[0].Apply();//指定滤镜

$(cid).filters[0].Play();}catch(err){}//开始滤镜

if(dq>=ImgList.length){dq=0}

$(cid).src=ImgList[dq];

$(cid).onclick=function(){

open(imgJup[(dq-1)],'','');}

for(b=0;b

$(cid).alt=imgAlt[dq];

dq=dq+1;

}

/*执行*/

var a=setInterval(Intail,spit);

var auto=function(){a=setInterval(Intail,spit); }

}

只能在IE浏览器中看到滤镜效果,其他浏览器为普通三屏焦点图


添加新评论


TOP