免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: [分享] 图片从右往左滚动图片代码[完美正确版],上贴错误了 [打印本頁]
作者: 郑爽中文网    時間: 2013-6-24 20:21     標題: 图片从右往左滚动图片代码[完美正确版],上贴错误了

效果预览图：
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的测试站测试过！

圖片附件: QQ截图20130624201446.png (2013-6-24 20:15, 221.25 KB) / 下載次數 3170
http://orzweb.net/discuz/attachment.php?aid=21247&k=8da03bb25bdd5f159e7e3ac21577018e&t=1732677287&sid=JQ1554

作者: pigeon    時間: 2013-6-24 21:13

对图片的大小有限制吗？还是可以自动调整图片尺寸？
作者: 达人小G    時間: 2013-6-25 06:58

支持楼主，谢谢分享
作者: 章鱼    時間: 2013-6-25 14:18

话说以后发教程能不能把<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>
複製代碼
作者: 无界    時間: 2013-6-25 15:45

郑爽是谁？
作者: DeiTiesZeus    時間: 2013-6-25 19:00

謝謝分享 ~
作者: pigeon    時間: 2013-6-25 19:46

章鱼很热心。
作者: 4rphotoclub    時間: 2013-6-26 16:02

來看看效果如何
作者: bossll    時間: 2013-6-26 16:15

回復 2# pigeon

你好!
上述圖片你可以自行調整大小喔 !
作者: bossll    時間: 2013-6-26 16:17

謝謝辛勞熱心站長分享很好代碼!
作者: pigeon    時間: 2013-6-26 17:46

回復 9# bossll


   是我自动调整还是电脑自动调整缩略图？
作者: bossll    時間: 2013-6-26 23:47

回復 11# pigeon

你好!
建議你自行用電腦圖片編輯工具修正適合你需要圖片大小,放置你須要地方就可以了!
謝謝



歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://orzweb.net/discuz/) Powered by Discuz! 7.2