免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

[分享] 图片从右往左滚动图片代码[完美正确版],上贴错误了

效果预览图:
QQ截图20130624201446.png

代码:
  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. <title>图片滚动</title>
  6. </head>
  7. <body>
  8. <style type="text/css">
  9. <!--
  10. #demo {
  11. background: #FFF;
  12. overflow:hidden;
  13. border: 1px dashed #CCC;
  14. width: 955px;
  15. }
  16. #demo img {
  17. border: 3px solid #F2F2F2;
  18. }
  19. #indemo {
  20. float: left;
  21. width: 955%;
  22. }
  23. #demo1 {
  24. float: left;
  25. }
  26. #demo2 {
  27. float: left;
  28. }
  29. -->
  30. </style>
  31. <div id="demo">
  32. <div id="indemo">
  33. <div id="demo1">
  34. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/051234a4aviqpvc7f913u3.jpg" border="0" /></a>
  35. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/050951kq6q9qq14zi229zg.jpg" border="0" /></a>
  36. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/051444b7bqu3f3f77bwq7r.jpg" border="0" /></a>
  37. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/051702j25j2mg80tjidw0t.jpg" border="0" /></a>
  38. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/052224u9ksefz39kxehe39.jpg" border="0" /></a>
  39. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/051953v2o219lqa1h0aslo.jpg" border="0" /></a>
  40. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/052725rlvj07f505t5cjbx.jpg" border="0" /></a>
  41. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/053016jnn0szjbv0bo7cxj.jpg" border="0" /></a>
  42. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/053401iaup7ahn6i77aink.jpg" border="0" /></a>
  43. </div>
  44. <div id="demo2"></div>
  45. </div>
  46. </div>
  47. <script>
  48. <!--
  49. var speed=10;
  50. var tab=document.getElementById("demo");
  51. var tab1=document.getElementById("demo1");
  52. var tab2=document.getElementById("demo2");
  53. tab2.innerHTML=tab1.innerHTML;
  54. function Marquee(){
  55. if(tab2.offsetWidth-tab.scrollLeft<=0)
  56. tab.scrollLeft-=tab1.offsetWidth
  57. else{
  58. tab.scrollLeft++;
  59. }
  60. }
  61. var MyMar=setInterval(Marquee,speed);
  62. tab.onmouseover=function() {clearInterval(MyMar)};
  63. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
  64. -->
  65. </script>
  66. </body>
  67. </html>
複製代碼
在此,我在这里向大家赔罪,因为一晚上没有睡觉,导致复制代码错误,造成不必要的困扰,在此深感愧疚!

代码使用教程:955为大小,自己按照自己的要求设置
代码放置地方:页内文字、头部、底部、帖子处  

已经经过我在SCLUB的测试站测试过!
1

評分人數

对图片的大小有限制吗?还是可以自动调整图片尺寸?

TOP

支持楼主,谢谢分享
欢迎来我Q群玩耍,群号159218504,群号没有错哦

TOP

话说以后发教程能不能把<html>之类的去掉在发布....
  1. <style type="text/css">
  2. <!--
  3. #demo {
  4. background: #FFF;
  5. overflow:hidden;
  6. border: 1px dashed #CCC;
  7. width: 955px;
  8. }
  9. #demo img {
  10. border: 3px solid #F2F2F2;
  11. }
  12. #indemo {
  13. float: left;
  14. width: 955%;
  15. }
  16. #demo1 {
  17. float: left;
  18. }
  19. #demo2 {
  20. float: left;
  21. }
  22. -->
  23. </style>
  24. <div id="demo">
  25. <div id="indemo">
  26. <div id="demo1">
  27. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/051234a4aviqpvc7f913u3.jpg" border="0" /></a>
  28. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/050951kq6q9qq14zi229zg.jpg" border="0" /></a>
  29. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/051444b7bqu3f3f77bwq7r.jpg" border="0" /></a>
  30. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/051702j25j2mg80tjidw0t.jpg" border="0" /></a>
  31. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/052224u9ksefz39kxehe39.jpg" border="0" /></a>
  32. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/051953v2o219lqa1h0aslo.jpg" border="0" /></a>
  33. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/052725rlvj07f505t5cjbx.jpg" border="0" /></a>
  34. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/053016jnn0szjbv0bo7cxj.jpg" border="0" /></a>
  35. <a href="#"><img src="http://zszww.mf530.com/data/attachment/forum/201306/24/053401iaup7ahn6i77aink.jpg" border="0" /></a>
  36. </div>
  37. <div id="demo2"></div>
  38. </div>
  39. </div>
  40. <script>
  41. <!--
  42. var speed=10;
  43. var tab=document.getElementById("demo");
  44. var tab1=document.getElementById("demo1");
  45. var tab2=document.getElementById("demo2");
  46. tab2.innerHTML=tab1.innerHTML;
  47. function Marquee(){
  48. if(tab2.offsetWidth-tab.scrollLeft<=0)
  49. tab.scrollLeft-=tab1.offsetWidth
  50. else{
  51. tab.scrollLeft++;
  52. }
  53. }
  54. var MyMar=setInterval(Marquee,speed);
  55. tab.onmouseover=function() {clearInterval(MyMar)};
  56. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
  57. -->
  58. </script>
複製代碼
章鱼之家代码站
 
 
 
 
 

TOP

郑爽是谁?

TOP

謝謝分享 ~

TOP

章鱼很热心。

TOP

來看看效果如何

TOP

回復 2# pigeon

你好!
上述圖片你可以自行調整大小喔 !

TOP

謝謝辛勞熱心站長分享很好代碼!

TOP

返回列表