导航

« 常见水果营养成分表photoshop 选区与参考线不能对齐问题  »

2012-11-4 12:21:19

不用flash的图片切换js

虚位以待 JavaScript

现在各大网站的图片切换基本不用flash了，这里也找了一个不用flash实现图片切换的js例子，特点：可加多张图

以下是代码，可以下载html文件：无flash图片切换js+css

 效果图片：

js无flash

折叠XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>图片幻灯切换</title>  
  6. <style type="text/css">  
  7. * { margin:0; padding:0; }  
  8. body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }  
  9. h1, h2, h3, h4, h5, h6 { font-size:1em; }  
  10. a { color:#0287CA; text-decoration:none; }  
  11. a:hover { text-decoration:underline; }  
  12. ul, li { list-style:none; }  
  13. fieldset, img { border:none; }  
  14. legend { display:none; }  
  15. em, strong, cite, th { font-style:normal; font-weight:normal; }  
  16. input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }  
  17. table { border-collapse:collapse; }  
  18. html { overflow:-moz-scrollbars-vertical; }   
  19. #ibanner { position:relative; width:650px; height:250px; overflow:hidden; margin:20px 0 20px 300px; }  
  20. #ibanner_pic {}  
  21. #ibanner_pic a { position:absolute; top:0; display:block; width:650px; height:250px; overflow:hidden; }  
  22. #ibanner_btn { position:absolute; z-index:9999; right:5px; bottom:5px; font-weight:700; font-family:Arial; }  
  23. #ibanner_btn span { display:block; float:left; margin-left:4px; padding:0 5px; background:#000; cursor:pointer; }  
  24. #ibanner_btn .normal { height:20px; margin-top:8px; border:1px solid #999; color:#999; font-size:16px; line-height:20px; }  
  25. #ibanner_btn .current { height:28px; border:1px solid #FF5300; color:#FF5300; font-size:28px; line-height:28px; }  
  26. </style>  
  27. <script type="text/javascript">  
  28. function $(id) { return document.getElementById(id); }  
  29. function addLoadEvent(func){  
  30. var oldonload = window.onload;  
  31. if (typeof window.onload != 'function') {  
  32. window.onload = func;  
  33. } else {  
  34. window.onload = function(){  
  35. oldonload();  
  36. func();  
  37. }  
  38. }  
  39. }  
  40. function addBtn() {  
  41. if(!$('ibanner')||!$('ibanner_pic')) return;  
  42. var picList = $('ibanner_pic').getElementsByTagName('a');  
  43. if(picList.length==0) return;  
  44. var btnBox = document.createElement('div');  
  45. btnBox.setAttribute('id','ibanner_btn');  
  46. var SpanBox ='';  
  47. for(var i=1; i<=picList.length; i++ ) {  
  48. var spanList = '<span class="normal">'+i+'</span>';  
  49. SpanBox += spanList;  
  50. }  
  51. btnBox.innerHTML = SpanBox;  
  52. $('ibanner').appendChild(btnBox);  
  53. $('ibanner_btn').getElementsByTagName('span')[0].className = 'current';  
  54. for (var m=0; m<picList.length; m++){  
  55. var attributeValue = 'picLi_'+m  
  56. picList[m].setAttribute('id',attributeValue);  
  57. }  
  58. }  
  59. function moveElement(elementID,final_x,final_y,interval) {  
  60. if (!document.getElementById) return false;  
  61. if (!document.getElementById(elementID)) return false;  
  62. var elem = document.getElementById(elementID);  
  63. if (elem.movement) {  
  64. clearTimeout(elem.movement);  
  65. }  
  66. if (!elem.style.left) {  
  67. elem.style.left = "0px";  
  68. }  
  69. if (!elem.style.top) {  
  70. elem.style.top = "0px";  
  71. }  
  72. var xpos = parseInt(elem.style.left);  
  73. var ypos = parseInt(elem.style.top);  
  74. if (xpos == final_x && ypos == final_y) {  
  75. moveing = false;  
  76. return true;  
  77. }  
  78. if (xpos < final_x) {  
  79. var dist = Math.ceil((final_x - xpos)/10);  
  80. xposxpos = xpos + dist;  
  81. }  
  82. if (xpos > final_x) {  
  83. var dist = Math.ceil((xpos - final_x)/10);  
  84. xposxpos = xpos - dist;  
  85. }  
  86. if (ypos < final_y) {  
  87. var dist = Math.ceil((final_y - ypos)/10);  
  88. yposypos = ypos + dist;  
  89. }  
  90. if (ypos > final_y) {  
  91. var dist = Math.ceil((ypos - final_y)/10);  
  92. yposypos = ypos - dist;  
  93. }  
  94. elem.style.left = xpos + "px";  
  95. elem.style.top = ypos + "px";  
  96. var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";  
  97. elem.movement = setTimeout(repeat,interval);  
  98. }  
  99. function classNormal() {  
  100. var btnList = $('ibanner_btn').getElementsByTagName('span');  
  101. for (var i=0; i<btnList.length; i++){  
  102. btnList[i].className='normal';  
  103. }  
  104. }  
  105. function picZ() {  
  106. var picList = $('ibanner_pic').getElementsByTagName('a');  
  107. for (var i=0; i<picList.length; i++){  
  108. picList[i].style.zIndex='1';  
  109. }  
  110. }  
  111. var autoKey = false;  
  112. function iBanner() {  
  113. if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')) return;  
  114. $('ibanner').onmouseover = function(){autoKey = true};  
  115. $('ibanner').onmouseout = function(){autoKey = false};  
  116.   
  117. var btnList = $('ibanner_btn').getElementsByTagName('span');  
  118. var picList = $('ibanner_pic').getElementsByTagName('a');  
  119. if (picList.length==1) return;  
  120. picList[0].style.zIndex='2';  
  121. for (var m=0; m<btnList.length; m++){  
  122. btnList[m].onmouseover = function() {  
  123. for(var n=0; n<btnList.length; n++) {  
  124. if (btnList[n].className == 'current') {  
  125. var currentNum = n;  
  126. }  
  127. }  
  128. classNormal();  
  129. picZ();  
  130. this.className='current';  
  131. picList[currentNum].style.zIndex='2';  
  132. var z = this.childNodes[0].nodeValue-1;  
  133. picList[z].style.zIndex='3';  
  134. if (currentNum!=z){  
  135. picList[z].style.left='650px';  
  136. moveElement('picLi_'+z,0,0,10);  
  137. }  
  138. }  
  139. }  
  140. }  
  141. setInterval('autoBanner()', 5000);  
  142. function autoBanner() {  
  143. if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')||autoKey) return;  
  144. var btnList = $('ibanner_btn').getElementsByTagName('span');  
  145. var picList = $('ibanner_pic').getElementsByTagName('a');  
  146. if (picList.length==1) return;  
  147. for(var i=0; i<btnList.length; i++) {  
  148. if (btnList[i].className == 'current') {  
  149. var currentNum = i;  
  150. }  
  151. }  
  152. if (currentNum==(picList.length-1) ){  
  153. classNormal();  
  154. picZ();  
  155. btnList[0].className='current';  
  156. picList[currentNum].style.zIndex='2';  
  157. picList[0].style.zIndex='3';  
  158. picList[0].style.left='650px';  
  159. moveElement('picLi_0',0,0,10);  
  160. } else {  
  161. classNormal();  
  162. picZ();  
  163. var nextNum = currentNum+1;  
  164. btnList[nextNum].className='current';  
  165. picList[currentNum].style.zIndex='2';  
  166. picList[nextNum].style.zIndex='3';  
  167. picList[nextNum].style.left='650px';  
  168. moveElement('picLi_'+nextNum,0,0,10);  
  169. }  
  170. }  
  171. addLoadEvent(addBtn);  
  172. addLoadEvent(iBanner);  
  173. </script>  
  174. </head>  
  175. <body>  
  176. <div id="ibanner">  
  177. <div id="ibanner_pic">  
  178. <a href="/jscss/"><img src="/jscss/demoimg/200904/a1.jpg" alt="" /></a>  
  179. <a href="/sort/index.shtml"><img src="/jscss/demoimg/200904/a2.jpg" alt="" /></a>  
  180. <a href="/other/lastupdate.shtml"><img src="/jscss/demoimg/200904/a3.jpg" alt="" /></a>  
  181. <a href="/other/top100.shtml"><img src="/jscss/demoimg/200904/a4.jpg" alt="" /></a>  
  182. </div>  
  183. </div><!--ibanner end-->  
  184. <div style="height:20px; background:#EEE;"></div>  
  185. </body>  
  186. </html>  

 

  • 顶一下
发布:Calf | 分类:编程学习 | 评论:0 | 引用:0 | 浏览:
虚位以待




原创文章如转载，请注明：转载自落日故乡

本文链接地址：http://www.spersky.com/post/400.html

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

内容搜索


虚位以待

常用链接

最新评论及回复

Powered By Z-Blog

Copyright spersky All Rights Reserved.Theme Moonlight,Calf modified.n 浙ICP备16017820号-1