JS图片展示效果

  • 2007-11-17
  • 分类：JavaScript
  • 作者：银子
  • 284 次查看
  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=gb2312" />
  5. <meta name="Author" content="wuleying" />
  6. <title>图片展示</title>
  7. <style>
  8. * {margin:0;padding:0;font-size:12px;}
  9. body {background:#000;}
  10. ul {list-style:none;}
  11. #box {margin:20px auto;width:600px;border:1px solid #ccc;height:70px;overflow:hidden;}
  12. #box_l,
  13. #box_r {float:left;padding:28px 6px 0 6px;background:#ccc;height:42px;cursor:pointer;color:#06c;}
  14. #box_r.down,
  15. #box_l.down {background:#999;color:#fff;}
  16. #box_r {float:right;}
  17. #box_c {float:left;width:564px;overflow:hidden;padding-top:4px;}
  18. #box_c img {width:100px;height:60px;border:1px solid #ccc;}
  19. #box_c li {float:left;display:inline;margin:0 2px 0 2px;}
  20. #box_c ul {width:1000px;margin-left:2px;}
  21. .alert {z-index:1000;filter:alpha(opacity=80);opacity:0.8;position:absolute;left:434px; top:409px;border:1px solid #ff0;background:#ffc;width:120px; height:16px;text-align:center;padding-top:4px;color:#111;}
  22. .none {display:none;}
  23. #show {border:1px solid #ccc;padding:3px;width:400px;height:300px;margin:40px auto;}
  24. #show img {width:400px;height:300px;cursor:pointer;}
  25. </style>
  26.  
  27. </head>
  28. <body>
  29. <div id="show">
  30. <img src="" id="showpic" />
  31. </div>
  32. <div id="box">
  33. <div id="box_l">&laquo;</div>
  34. <div id="box_c">
  35. <ul>
  36. <li><a href="#"><img src="http://smallpic.zcool.com.cn/share/nr1.jpg" alt="" /></a></li>
  37. <li><a href="#"><img src="http://smallpic.zcool.com.cn/02.jpg" alt="" /></a></li>
  38. <li><a href="#"><img src="http://smallpic.zcool.com.cn/03.jpg" alt="" /></a></li>
  39. <li><a href="#"><img src="http://smallpic.zcool.com.cn/vector/people1/060_s.jpg" alt="" /></a></li>
  40. <li><a href="#"><img src="http://smallpic.zcool.com.cn/share/sl.jpg" alt="" /></a></li>
  41. <li><a href="#"><img src="http://smallpic.zcool.com.cn/vector/design1/139_s.jpg" alt="" /></a></li>
  42. <li><a href="#"><img src="http://smallpic.zcool.com.cn/share/sl1.jpg" alt="" /></a></li>
  43. <li><a href="#"><img src="http://smallpic.zcool.com.cn/vector/design1/138_s.jpg" alt="" /></a></li>
  44. <li><a href="#"><img src="http://smallpic.zcool.com.cn/png3/052.jpg" alt="" /></a></li>
  45. </ul>
  46. </div>
  47. <div id="box_r">&raquo;</div>
  48. </div>
  49. <div class="none" id="sorry">对不起,到头了!</div>
  50. <script type="text/javascript">
  51. var box = document.getElementById("box_c");
  52. var boxl = document.getElementById("box_l");
  53. var boxr = document.getElementById("box_r");
  54. var ts = document.getElementById("sorry");
  55. i = 0;
  56. function scrollFunLeft()
  57. {
  58. i++;
  59. if(box.scrollLeft<386)
  60. {
  61. box.scrollLeft+=i;
  62. ts.className="";
  63. }
  64. else
  65. {
  66. clearInterval(t);
  67. i=0;
  68. ts.className="alert";
  69. }
  70. }
  71.  
  72. function scrollFunRight()
  73. {
  74. i++;
  75. if(box.scrollLeft>0)
  76. {
  77. box.scrollLeft-=i;
  78. ts.className="";
  79. }
  80. else
  81. {
  82. clearInterval(t);
  83. i=0;
  84. ts.className="alert";
  85. }
  86. }
  87.  
  88. boxl.onmouseover = function(){t=setInterval(scrollFunRight,70);boxl.className="down"}
  89. boxl.onmouseout = function() {clearInterval(t);i=0;boxl.className="";ts.className="";}
  90. boxr.onmouseover = function(){t=setInterval(scrollFunLeft,70);boxr.className="down";}
  91. boxr.onmouseout = function() {clearInterval(t);i=0;boxr.className="";ts.className="";}
  92.  
  93. /*显示大图*/
  94. var pic = document.getElementById("showpic");
  95. var imgs = document.getElementById("box_c").getElementsByTagName("img");
  96. for(i=0;i<imgs.length;i++)
  97. {
  98. window.onload = function() {pic.src= imgs[0].src;}
  99. imgs[i].onmouseover = function() {pic.src = this.getAttribute('src');}
  100. imgs[i].onclick = function() {window.open(this.getAttribute('src'));}
  101. pic.onclick = function() {window.open(this.getAttribute('src'));}
  102. }
  103. </script>
  104. </body>
  105. </html>

demo http://www.ywowy.com/code/imgshow/

Tags : , , ,
0 条评论

浏览最多的10篇日志

评论最多的10篇日志

随机显示的10篇日志