JavaScript动感图片标题的焦点图切换

发布时间：2018-08-21 08:30:56 所属栏目：Asp教程来源：站长网

导读：Java script 动感焦点图切换，标题和简短的图片介绍也是动感的，整体看上去很有灵气，本代码对于学习JavaScript的朋友来说，当作一款学习的参考代码也是适合的，好好研究一下吧。特效演示： !Doctype htmlhtmlheadmeta http-equiv=Content-type content=t

　　Javascript 动感焦点图切换，标题和简短的图片介绍也是动感的，整体看上去很有灵气，本代码对于学习JavaScript的朋友来说，当作一款学习的参考代码也是适合的，好好研究一下吧。

　　特效演示：

<!Doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>动感图片标题的焦点图切换 - Liehuo.Net</title> <style type="text/css"> #fader{position:relative;overflow:hidden;height:300px;width:500px} #fader li{position:absolute;left:0;top:0;} ul,li{list-style:none;margin:0;padding:0} img{display:block;} .fader-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#333;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;} .fader-cur-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#ff7a00;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;} </style> <script type="text/javascript"> var Hongru={}; function H$(id){return document.getElementById(id)} function H$$(c,p){return p.getElementsByTagName(c)} Hongru.fader = function(){ function init(anchor,options){ this.anchor = anchor; var wp = H$(options.id), ul = H$$('ul',wp)[0], li = this.li = H$$('li',ul); this.index = options.position?options.position:0; this.a = options.auto?options.auto:2; this.cur = this.z = 0; this.l = li.length; this.img = []; for(var k=0;k<this.l;k++){ this.img.push(H$$('img',this.li[k])[0]); } this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav'; nav_wp = document.createElement('div'); nav_wp.id = 'fader-nav'; nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; var alt = this.alt = document.createElement('p'); for(var i=0;i<this.l;i++){ this.li[i].o = 100; //setOpacity(this.li[i],this.li.o); this.li[i].style.opacity = this.li[i].o/100; this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')'; //绘制控制器 var nav = document.createElement('a'); nav.className = options.navClass?options.navClass:'fader-nav'; nav.innerHTML = i+1; nav.onclick = new Function(this.anchor+'.pos('+i+')'); nav_wp.appendChild(nav); } wp.appendChild(alt); wp.appendChild(nav_wp); this.textH = nav_wp.offsetHeight; alt.style.cssText = 'color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0;bottom:0;overflow:hidden;width:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);'; alt.style.height = alt.style.lineHeight = this.textH+'px'; this.pos(this.index); } init.prototype={ auto:function(){ this.li.a = setInterval(new Function(this.anchor+'.move(1)'),this.a*1000); }, move:function(i){ var n = this.cur+i; var m = i==1?n==this.l?0:n:n<0?this.l-1:n; this.pos(m); }, pos:function(i){ clearInterval(this.li.a); clearInterval(this.li[i].f); var curLi = this.li[i]; this.z++; curLi.style.zIndex = this.z; this.alt.style.zIndex = this.z+1; nav_wp.style.zIndex = this.z+2; this.li.a=false; //这句话是必要的 this.cur = i; //setOpacity(curLi[i],0); if(this.li[i].o>=100){ this.li[i].o = 0; curLi.style.opacity = 0; curLi.style.filter = 'alpha(opacity=0)'; this.alt.style.height = '0px'; } for(var x=0;x<this.l;x++){ nav_wp.getElementsByTagName('a')[x].className = x==i?this.curC:'fader-nav'; } this.alt.innerHTML = this.img[i].alt; this.li[i].f = setInterval(new Function(this.anchor+'.fade('+i+')'),20); }, fade:function(i){ var p=this.li[i]; if(p.o>=100){ clearInterval(p.f); if(!this.li.a){ //一定要在这里做个是否已经clearInterval的判断，要不然在快速点击的时候会导致图片不停地闪 this.auto(); } } else{ p.o+=5; //setOpacity(this.li[i],this.li[i].o); p.style.opacity = p.o/100; p.style.filter = 'alpha(opacity='+p.o+')'; this.alt.style.height = Math.ceil(p.o*this.textH/100)+'px'; } } }; return {init:init}; }(); </script> </head> <body> <div id="fader"> <ul> <li><img src="http://www.veryhuo.com/uploads/common/images/p1.jpg" alt="我是图片一" /></li> <li><img src="http://www.veryhuo.com/uploads/common/images/p2.jpg" alt="哈哈，图片二" /></li> <li><img src="http://www.veryhuo.com/uploads/common/images/p3.jpg" alt="这是图片三" /></li> <li><img src="http://www.veryhuo.com/uploads/common/images/p4.jpg" alt="烈火学院，图四" /></li> <li><img src="http://www.veryhuo.com/uploads/common/images/p5.jpg" alt="图片五来咯" /></li> </ul> </div> <script type="text/javascript"> var fader = new Hongru.fader.init('fader',{ id:'fader' }); </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：信阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!