淡入淡出的js焦点图切换,带文字说明和播放控制

　　经常来烈火网看网页特效的朋友一定会发现，最近jQuery的特效代码越来越多，对于js的使用，渐渐的少了，其实js还是现在的主流脚本，因为jQuery大家还不是很熟悉，在这里推荐大家到烈火提供的jQuery手册看看。

　　回到正题，介绍本文的特效，一款焦点图切换JS代码，淡入淡出方式的图片转场方式，带文字说明和链接，带播放控制，切换平滑，由JavsScript完成核心控制代码，并没有使用jquery，更没有使用flash哦。

　　顺便说一下，如果你想修改图片大小，必须要先修改CSS中的宽度与高度，并且要在高度中预留20多个像素给文字说明。

　　实例演示：

<html> <head> <title>无jQuery焦点图片广告 - Liehuo.Net</title> <style> #player{position:relative;width:500px;height:410px;overflow:hidden; margin:11px auto 0 auto; border:1px solid #ccc;} #player a{color:#333;} #player *{border:0;padding:0;margin:0;} #player .Limg{position:relative;} #player .Limg li{position:absolute;top:0;left:0;background:#fff;} #player .Limg li img{border:1px solid #FFFFFF; margin:0;} #player .Limg li p{line-height:25px; font-size:14px; padding-left:15px;} #player .Nubbt{position:absolute;z-index:9;right:5px;bottom:3px; line-height:25px;} #player .Nubbt span{border:1px solid #45A06F;background:#fff;padding:1px 5px;margin:0 2px; font-style:normal;cursor:pointer;} #player .Nubbt span.on{background:#47AA72;color:#fff;} </style> </head> <body> <h1>无jQuery点图切换JS代码</h1> <div id="player"> <ul class="Limg"> <li><a href="#" target="_blank"><img src="/uploads/common/images/p1.jpg"/>树林蓝天：烈火网风景图片展示一</a></li> <li><a href="#" target="_blank"><img src="/uploads/common/images/p2.jpg"/>草原古堡：烈火网风景图片展示二</a></li> <li><a href="#" target="_blank"><img src="/uploads/common/images/p3.jpg"/>桂林山水：烈火网风景图片展示三</a></li> <li><a href="#" target="_blank"><img src="/uploads/common/images/p4.jpg"/>非洲沼泽：烈火网风景图片展示四</a></li> </ul> <cite class="Nubbt">1234</cite> </div> <script language=javascript type="text/javascript"> //*焦点切换 (function(){ if(!Function.prototype.bind){ Function.prototype.bind = function(obj){ var owner = this,args = Array.prototype.slice.call(arguments),callobj = Array.prototype.shift.call(args); return function(e){e=e||top.window.event||window.event;owner.apply(callobj,args.concat([e]));}; }; } })(); var player = function(id){ this.ctn = document.getElementById(id); this.adLis = null; this.btns = null; this.animStep = 0.2;//动画速度0.1～0.9 this.switchSpeed = 3;//自动播放间隔(s) this.defOpacity = 1; this.tmpOpacity = 1; this.crtIndex = 0; this.crtLi = null; this.adLength = 0; this.timerAnim = null; this.timerSwitch = null; this.init(); }; player.prototype = { fnAnim:function(toIndex){ if(this.timerAnim){window.clearTimeout(this.timerAnim);} if(this.tmpOpacity <= 0){ this.crtLi.style.opacity = this.tmpOpacity = this.defOpacity; this.crtLi.style.filter = 'Alpha(Opacity=' + this.defOpacity*100 + ')'; this.crtLi.style.zIndex = 0; this.crtIndex = toIndex; return; } this.crtLi.style.opacity = this.tmpOpacity = this.tmpOpacity - this.animStep; this.crtLi.style.filter = 'Alpha(Opacity=' + this.tmpOpacity*100 + ')'; this.timerAnim = window.setTimeout(this.fnAnim.bind(this,toIndex),50); }, fnNextIndex:function(){ return (this.crtIndex >= this.adLength-1)?0:this.crtIndex+1; }, fnSwitch:function(toIndex){ if(this.crtIndex==toIndex){return;} this.crtLi = this.adLis[this.crtIndex]; for(var i=0;i<this.adLength;i++){ this.adLis[i].style.zIndex = 0; } this.crtLi.style.zIndex = 2; this.adLis[toIndex].style.zIndex = 1; for(var i=0;i<this.adLength;i++){ this.btns[i].className = ''; } this.btns[toIndex].className = 'on' this.fnAnim(toIndex); }, fnAutoPlay:function(){ this.fnSwitch(this.fnNextIndex()); }, fnPlay:function(){ this.timerSwitch = window.setInterval(this.fnAutoPlay.bind(this),this.switchSpeed*1000); }, fnStopPlay:function(){ window.clearTimeout(this.timerSwitch); }, init:function(){ this.adLis = this.ctn.getElementsByTagName('li'); this.btns = this.ctn.getElementsByTagName('cite')[0].getElementsByTagName('span'); this.adLength = this.adLis.length; for(var i=0,l=this.btns.length;i<l;i++){ with({i:i}){ this.btns[i].index = i; this.btns[i].onclick = this.fnSwitch.bind(this,i); this.btns[i].onclick = this.fnSwitch.bind(this,i); } } this.adLis[this.crtIndex].style.zIndex = 2; this.fnPlay(); this.ctn.onmouseover = this.fnStopPlay.bind(this); this.ctn.onmouseout = this.fnPlay.bind(this); } }; var player1 = new player('player'); </script>  </BODY> </HTML> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

淡入淡出的js焦点图切换,带文字说明和播放控制

由 dawei

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展

淡入淡出的js焦点图切换,带文字说明和播放控制

由 dawei

相关文章

使用softaculous创建WordPress临时站点

怎样建网站更有利于网站推广和优化？

中企动力带你了解舌尖上的餐饮网站设计趋势

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展