免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
12
返回列表 發帖

Rank: 4

積分
612 
威望
612  
金錢
21  
最後登錄
2024-1-30 

貢獻優秀級會員
1# 跳轉到 » 正序看帖
打印
tT
郑爽中文网發表於 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的测试站测试过！
1

評分人數

收藏 分享

Rank: 7Rank: 7Rank: 7

積分
7806 
威望
7806  
金錢
9360  
最後登錄
2024-10-23 

資深版主正式版主中級會員高級會員金牌會員論壇元老
12#
bossll發表於 2013-6-26 23:47 | 只看該作者
回復 11# pigeon

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

TOP

Rank: 6Rank: 6

積分
2835 
威望
2835  
金錢
2475  
最後登錄
2018-10-27 

金牌會員中級會員高級會員
11#
pigeon發表於 2013-6-26 17:46 | 只看該作者
回復 9# bossll


   是我自动调整还是电脑自动调整缩略图？

TOP

Rank: 7Rank: 7Rank: 7

積分
7806 
威望
7806  
金錢
9360  
最後登錄
2024-10-23 

資深版主正式版主中級會員高級會員金牌會員論壇元老
10#
bossll發表於 2013-6-26 16:17 | 只看該作者
謝謝辛勞熱心站長分享很好代碼!

TOP

Rank: 7Rank: 7Rank: 7

積分
7806 
威望
7806  
金錢
9360  
最後登錄
2024-10-23 

資深版主正式版主中級會員高級會員金牌會員論壇元老
9#
bossll發表於 2013-6-26 16:15 | 只看該作者
回復 2# pigeon

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

TOP

Rank: 7Rank: 7Rank: 7

積分
8659 
威望
8659  
金錢
10077  
最後登錄
2024-11-22 

中級會員高級會員金牌會員論壇元老正式版主資深版主熱心會員
8#
4rphotoclub發表於 2013-6-26 16:02 | 只看該作者
來看看效果如何
歡迎大家齊來加入4R網上攝影會

TOP

Rank: 6Rank: 6

積分
2835 
威望
2835  
金錢
2475  
最後登錄
2018-10-27 

金牌會員中級會員高級會員
7#
pigeon發表於 2013-6-25 19:46 | 只看該作者
章鱼很热心。

TOP

Rank: 2

積分
112 
威望
112  
金錢
9  
最後登錄
2013-8-10 
6#
DeiTiesZeus發表於 2013-6-25 19:00 | 只看該作者
謝謝分享 ~

TOP

Rank: 7Rank: 7Rank: 7

積分
5068 
威望
5068  
金錢
2878  
最後登錄
2024-11-19 

熱心會員貢獻特別級會員資深版主正式版主中級會員高級會員金牌會員論壇元老
5#
无界發表於 2013-6-25 15:45 | 只看該作者
郑爽是谁？
爱秀代码

TOP

Rank: 7Rank: 7Rank: 7

積分
5635 
威望
5635  
金錢
4993  
最後登錄
2020-5-17 

貢獻特別級會員正式版主中級會員高級會員金牌會員論壇元老
4#
章鱼發表於 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>
複製代碼
章鱼之家代码站
　
　
　
　
　

TOP

12
返回列表