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

发布时间：2018-08-24 17:31:25 所属栏目：Asp教程来源：站长网

导读：经常来烈火网看网页特效的朋友一定会发现，最近 jQuery 的特效代码越来越多，对于js的使用，渐渐的少了，其实js还是现在的主流脚本，因为jQuery大家还不是很熟悉，在这里推荐大家到烈火提供的jQuery手册看看。回到正题，介绍本文的特效，一款焦点图切换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"/><p>树林蓝天：烈火网风景图片展示一</p></a></li> <li><a href="#" target="_blank"><img src="/uploads/common/images/p2.jpg"/><p>草原古堡：烈火网风景图片展示二</p></a></li> <li><a href="#" target="_blank"><img src="/uploads/common/images/p3.jpg"/><p>桂林山水：烈火网风景图片展示三</p></a></li> <li><a href="#" target="_blank"><img src="/uploads/common/images/p4.jpg"/><p>非洲沼泽：烈火网风景图片展示四</p></a></li> </ul> <cite class="Nubbt"><span class="on">1</span><span >2</span><span >3</span><span >4</span></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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：威海站长网）

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