һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+
̳ WEBҳǰ뿪 ǰ̨ű

뵭jsͼл,˵Ͳſ

[]
14690 websjy 2014-5-24 16:36:17
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţע  

x
ܱĵЧһͼлJS룬뵭ʽͼƬתʽ˵ӣſƣлƽJavsScriptɺĿƴ룬ûʹjqueryûʹflashŶ

˳˵һ£޸ͼƬСҪ޸CSSеĿ߶ȣҪڸ߶Ԥ20ظ˵

  1. <html>
  2. <head>
  3. <title>뵭jsͼл,˵Ͳſ</title>
  4. <style>
  5. #player{position:relative;width:630px;height:345px;overflow:hidden; margin:11px auto 0 auto; border:1px solid #ccc;}
  6. #player a{color:#333;}
  7. #player *{border:0;padding:0;margin:0;}
  8. #player .Limg{position:relative;}
  9. #player .Limg li{position:absolute;top:0;left:0;background:#fff;}
  10. #player .Limg li img{border:1px solid #FFFFFF; margin:0;}
  11. #player .Limg li  p{line-height:25px; font-size:14px; padding-left:15px;}
  12. #player .Nubbt{position:absolute;z-index:9;right:5px;bottom:3px; line-height:25px;}
  13. #player .Nubbt span{border:1px solid #45A06F;background:#fff;padding:1px 5px;margin:0 2px; font-style:normal;cursor:pointer;}
  14. #player .Nubbt span.on{background:#47AA72;color:#fff;}
  15. </style>
  16. </head>
  17. <body>
  18. <h1>jQueryͼлJS</h1>
  19. <div id="player">
  20. <ul class="Limg">
  21. <li><a href="#" target="_blank"><img src="http://www.websjy.com/data/attachment/portal/201405/24/140043uz3wzok3wk3wc3ic.jpg"/><p>ѸʽSECݽй˵飬1Ԫ</p></a></li>
  22. <li><a href="#" target="_blank"><img src="http://www.websjy.com/data/attachment/portal/201405/22/084950l8ioj0iim80mhcvu.png"/><p>ScreenshotterƶӦͼļ򵥹</p></a></li>
  23. <li><a href="#" target="_blank"><img src="http://www.websjy.com/data/attachment/portal/201405/21/212754it14045905ayy610.jpg"/><p>ĽǶȿֻSmartisanT1ֵ3000</p></a></li>
  24. <li><a href="#" target="_blank"><img src="http://www.websjy.com/data/attachment/portal/201405/21/084609n11zbvgffgbzl1vl.png"/><p>Adobe ƴذ汾 photoshop CC ׼</p></a></li>
  25. </ul>
  26. <cite class="Nubbt"><span class="on">1</span><span >2</span><span >3</span><span >4</span></cite>
  27. </div>
  28. <script language=javascript type="text/javascript">
  29. //*л
  30. (function(){
  31. if(!Function.prototype.bind){
  32. Function.prototype.bind = function(obj){
  33. var owner = this,args = Array.prototype.slice.call(arguments),callobj = Array.prototype.shift.call(args);
  34. return function(e){e=e||top.window.event||window.event;owner.apply(callobj,args.concat([e]));};
  35. };
  36. }
  37. })();
  38. var player = function(id){
  39. this.ctn = document.getElementById(id);
  40. this.adLis = null;
  41. this.btns = null;
  42. this.animStep = 0.2;//ٶ0.10.9
  43. this.switchSpeed = 3;//Զż(s)
  44. this.defOpacity = 1;
  45. this.tmpOpacity = 1;
  46. this.crtIndex = 0;
  47. this.crtLi = null;
  48. this.adLength = 0;
  49. this.timerAnim = null;
  50. this.timerSwitch = null;
  51. this.init();
  52. };
  53. player.prototype = {
  54. fnAnim:function(toIndex){
  55. if(this.timerAnim){window.clearTimeout(this.timerAnim);}
  56. if(this.tmpOpacity <= 0){
  57. this.crtLi.style.opacity = this.tmpOpacity = this.defOpacity;
  58. this.crtLi.style.filter = 'Alpha(Opacity=' + this.defOpacity*100 + ')';
  59. this.crtLi.style.zIndex = 0;
  60. this.crtIndex = toIndex;
  61. return;
  62. }
  63. this.crtLi.style.opacity = this.tmpOpacity = this.tmpOpacity - this.animStep;
  64. this.crtLi.style.filter = 'Alpha(Opacity=' + this.tmpOpacity*100 + ')';
  65. this.timerAnim = window.setTimeout(this.fnAnim.bind(this,toIndex),50);
  66. },
  67. fnNextIndex:function(){
  68. return (this.crtIndex >= this.adLength-1)?0:this.crtIndex+1;
  69. },
  70. fnSwitch:function(toIndex){
  71. if(this.crtIndex==toIndex){return;}
  72. this.crtLi = this.adLis[this.crtIndex];
  73. for(var i=0;i<this.adLength;i++){
  74. this.adLis[i].style.zIndex = 0;
  75. }
  76. this.crtLi.style.zIndex = 2;
  77. this.adLis[toIndex].style.zIndex = 1;
  78. for(var i=0;i<this.adLength;i++){
  79. this.btns[i].className = '';
  80. }
  81. this.btns[toIndex].className = 'on'
  82. this.fnAnim(toIndex);
  83. },
  84. fnAutoPlay:function(){
  85. this.fnSwitch(this.fnNextIndex());
  86. },
  87. fnPlay:function(){
  88. this.timerSwitch = window.setInterval(this.fnAutoPlay.bind(this),this.switchSpeed*1000);
  89. },
  90. fnStopPlay:function(){
  91. window.clearTimeout(this.timerSwitch);
  92. },
  93. init:function(){
  94. this.adLis = this.ctn.getElementsByTagName('li');
  95. this.btns = this.ctn.getElementsByTagName('cite')[0].getElementsByTagName('span');
  96. this.adLength = this.adLis.length;
  97. for(var i=0,l=this.btns.length;i<l;i++){
  98. with({i:i}){
  99. this.btns[i].index = i;
  100. this.btns[i].onclick = this.fnSwitch.bind(this,i);
  101. this.btns[i].onclick = this.fnSwitch.bind(this,i);
  102. }
  103. }
  104. this.adLis[this.crtIndex].style.zIndex = 2;
  105. this.fnPlay();
  106. this.ctn.onmouseover = this.fnStopPlay.bind(this);
  107. this.ctn.onmouseout = this.fnPlay.bind(this);
  108. }
  109. };
  110. var player1 = new player('player');
  111. </script> <!--/*ͼлJS*/-->
  112. </BODY>
  113. </HTML>
ƴ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
б

ֹ

²

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2018-6-19 22:16

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б