淡入淡出的js核心图切换,带笔墨声名和播放节制

发布时间：2018-08-23 04:14:48 所属栏目：编程来源：站长网

导读：常常来猛火网看网页殊效的伴侣必然会发明，最近 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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys