自己写的一个简单的走马灯效果

  1. <!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.1//EN」 「http://www.w3.org/TR/xhtml11/DTD/xhtml11.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>demo</title>
  6. <style type=「text/css」>
  7. *{
  8. margin:0 0;
  9. padding:0 0;
  10. }
  11. #outDemo{
  12. overflow:hidden;
  13. width:200px;
  14. border:2px solid #e0e0e0;
  15. padding:2px;
  16. }
  17. #outDemo div{
  18. float:left;
  19. padding:1px;
  20. }
  21. #innDemo{
  22. white-space:nowrap;
  23. }
  24. img{
  25. border:0px solid #fff;
  26. }
  27. </style>
  28. <script type=「text/javascript」>
  29. window.onload = function(){
  30. var demo = document.getElementById(「outDemo」);
  31. var demo1 = document.getElementById(「innDemo」);
  32. demo1.innerHTML += demo1.innerHTML;
  33. function move(){
  34. demo.scrollLeft = demo.scrollLeft==240?demo.scrollLeft=1:demo.scrollLeft+1;
  35. }
  36. function go(){
  37. setInterval(move,20);
  38. }
  39. go();
  40. }
  41. </script>
  42. </head>
  43. <body>
  44. <div id=『outDemo』>
  45. <div id=『innDemo』>
  46. <a href=『javascript:;』><img src=「images/apple439.PNG」 alt=「apple439.PNG」 width=「111px」 /></a>
  47. <a href=『javascript:;』><img src=「images/apple440.PNG」 alt=「apple440.PNG」 width=「111px」 /></a>
  48. </div>
  49. </div>
  50. </body>
  51. </html>

發表回覆

你的電郵地址並不會被公開。 必要欄位標記為 *