js三屏焦点图滤镜效果

最新推荐文章于 2018-12-06 19:57:46 发布

iteye_13564

最新推荐文章于 2018-12-06 19:57:46 发布

阅读量247

点赞数

分类专栏： js 文章标签： J# Microsoft HTML

本文链接：https://blog.csdn.net/iteye_13564/article/details/81898723

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<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="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>

iteye_13564

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js三屏焦点图滤镜效果

&lt;html&gt; &lt;head&gt; &lt;script&gt; function $(id){return document.getElementById(id);} //imglist Array 图片信息 //imgalt Array 图片描述信息 //imgjup Array点击图片跳转地址 //cid 显示图片容积ID //Mea...
复制链接

扫一扫