js三屏焦点图滤镜效果

<html>
<head>
<script>
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).οnmοuseοver=function(){clearInterval(a)}; //鼠标经过时暂停自动播放
$(cid).οnmοuseοut=function(){auto();}  //鼠标移开开始自动播放
$(cid).style.cursor="pointer";
/*创建菜单*/
for(j=0;j<ImgList.length;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<meauLis.length;i++){//循环所有菜单项 if(meauLis[i].id!="nothis"){//判断是不是菜单 meauLis[i].οnclick=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<meauLis.length;x++){if(meauLis[x]!= this){meauLis[x].className="ou"}} dq=parseInt(this.id); $(cid).οnclick=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).οnclick=function(){ open(imgJup[(dq-1)],'','');}     for(b=0;b<ImgList.length;b++){if(b==dq){meauLis[(dq+1)].className='ov'}else{meauLis[(b+1)].className='ou'}} $(cid).alt=imgAlt[dq];     dq=dq+1;       }
/*执行*/
var a=setInterval(Intail,spit);
var auto=function(){a=setInterval(Intail,spit); }
} </script>
<style>
.imgbox{
width:628px;
height:276px;
overflow:hidden;
margin:14px 12px 10px 12px;
}
.imgbox  img{
width:628px;
height:276px;
}
.imgMeau{
width:628px;
height:86px;
overflow:hidden;
margin:0px 12px 0px 12px;
}
.imgMeau ul{ padding:0px; margin:0px; width:628px; height:86px; overflow:hidden; list-style:none;
}
.imgMeau ul li{
background:url(imgmebg.jpg);
float:left;
width:180px;
height:76px;
margin-left:4px;
padding:3px 2px 1px 2px;
}
.ov{
border:#06C solid 1px;
}
.ou{
border:none;
}
.imgMeau ul li img{
border:0px;
width:179px;
height:76px;
cursor:pointer;
} </style>
</head>
<body>
<div class="imgbox" id="imgBox" > <img src="" border="0" style="FILTER: progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0" name="Bimg" id="Bimg"/> </div> <div class="imgMeau"> <ul id="imgMeau"> <li id="nothis" style="width:53px; float:left; border:0px; margin:0px;"> <img src="data:images/vi_-07.jpg" style="width:53px;"/></li> </ul> <script> var imgList=new Array(); var imgAlt=new Array(); var imgJup=new Array(); imgList[0]='http://pic.usfang.com/mntp/20081101/2008110113161918.jpg'; imgAlt[0]='imgAlt' imgJup[0]='url'; imgList[1]='http://pic.dc.yesky.com/imagelist/08/32/9811885_9612.jpg'; imgAlt[1]='imgAlt' imgJup[1]='url';  imgList[2]='http://pic.dc.yesky.com/imagelist/08/33/9889954_1713.jpg'; imgAlt[3]='imgAlt' imgJup[3]='url';  new cruttImg(imgList,imgAlt,imgJup,'imgMeau','Bimg'); </script> </div> </body>
</html>

js三屏焦点图滤镜效果相关推荐

HTML5超炫全屏焦点图插件
在网站开发过程中,特别是前端开发这块,经常会使用到很多图片滑块动画,也就是一些基于jQuery和HTML5的焦点图插件.本文将为大家收集10个超赞的jQuery图片滑块动画,这些现成的jQuery插件 ...
使用html仿支付宝首页,jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
本文实例讲述了jQuery实现仿Alipay支付宝首页全屏焦点图切换特效.分享给大家供大家参考.具体实现方法如下: /p> "http://www.w3.org/TR/xhtml1/D ...
jQuery带缩略图的宽屏焦点图插件
在线演示本地下载
全屏css,CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
分享10款常用的jQuery焦点图插件
爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件之前我们已经分享过很多非常实用的jQuery焦点图 ...
左右全屏banner焦点图代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等
介绍源码名称:[左右全屏banner焦点图]代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等源码大小:16.6KB 开发语言:PHP+Mysql 操作系统:Windo ...
html焦点图自动轮播,JS实现焦点图轮播效果的方法详解
本文实例讲述了JS实现焦点图轮播效果的方法.分享给大家供大家参考,具体如下: 效果图如下: 一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 ...
js之焦点图轮播特效
js之焦点图轮播特效一.原理介绍焦点图在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思,只不过加上了图片.据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字.在很多购物网主页面 ...
三图并列jquery焦点图代码
效果如下: 主要代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

js三屏焦点图滤镜效果

js三屏焦点图滤镜效果相关推荐

最新文章

热门文章