DIY แสดงภาพเลื่อน

khonakha

1. <style type="text/css">  
   
2. <!--
   
3. .panpanluoBox{width:960px;overflow:hidden;padding:5px 5 5px 5px;margin:0 auto;}
   
4. .panpanluoBox .LeftBotton{height:114px;width:11px;background:url(static/image/common/panpanluo_button_l.gif) no-repeat 0px 0;overflow:hidden;float:left;display:inline;margin:0px 0 0 0;cursor:pointer;}
   
5. .panpanluoBox .RightBotton{height:114px;width:11px;background:url(static/image/common/panpanluo_button_r.gif) no-repeat 0px  0;overflow:hidden;float:left;display:inline;margin:0px 0 0 0;cursor:pointer;}
   
6. .panpanluoBox .Cont{width:936px;overflow:hidden;float:left;}
   
7. .panpanluoBox .ScrCont{width:10000000px;}
   
8. .panpanluoBox .Cont .pic{width:135px;float:left;text-align:center;}
   
9. .panpanluoBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}
   
10. .panpanluoBox .Cont .pic p{line-height:26px;color:#505050;}
    
11. .panpanluoBox .Cont a:link,.panpanluoBox .Cont a:visited{color:#626466;text-decoration:none;}
    
12. .panpanluoBox .Cont a:hover{color:#f00;text-decoration:underline;}
    
13. .panpanluoBox #List1,.panpanluoBox #List2{float:left;}
    
14. -->
    
15. </style>
    
16. <div  class="module cl ml">
    
17. <div class="panpanluoBox">
    
18.      <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
    
19.      <div class="Cont" id="ISL_Cont">
    
20.       <div class="ScrCont">
    
21.        <div id="List1">      
    
22.         <!-- 图片载入 begin -->
    
23.          [loop]
    
24.          <div class="pic">
    
25.           <a href="{threadurl}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a>
    
26.         <p><a href="{threadurl}" title="{threadsubject}"{target}>{threadsubject}</a></p>
    
27.          </div>
    
28.         [/loop]
    
29.         <!-- 图片载入 end -->   
    
30.        </div>
    
31.        <div id="List2"></div>
    
32.       </div>
    
33.      </div>
    
34.      <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
    
35.     </div>
    
36.    </div>
    
37.   </div>
    
38. <script language="javascript" type="text/javascript">
    
39. <!--//--><![CDATA[//><!--
    
40. var Speed = 1; //速度(毫秒)
    
41. var Space = 5; //每次移动(px)
    
42. var PageWidth = 945; //移位宽度
    
43. var fill = 0; //整体移动
    
44. var MoveLock = false;
    
45. var MoveTimeObj;
    
46. var Comp = 0;
    
47. var AutoPlayObj = null;
    
48. GetObj("List2").innerHTML = GetObj("List1").innerHTML;
    
49. GetObj('ISL_Cont').scrollLeft = fill;
    
50. GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
    
51. GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
    
52. AutoPlay();
    
53. function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
    
54. function AutoPlay(){ //自动滚动
    
55. clearInterval(AutoPlayObj);
    
56. AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间
    
57. }
    
58. function ISL_GoUp(){
    
59. if(MoveLock) return;
    
60. clearInterval(AutoPlayObj);
    
61. MoveLock = true;
    
62. MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
    
63. }
    
64. function ISL_StopUp(){
    
65. clearInterval(MoveTimeObj);
    
66. if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
    
67.   Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
    
68.   CompScr();
    
69. }else{
    
70.   MoveLock = false;
    
71. }
    
72. AutoPlay();
    
73. }
    
74. function ISL_ScrUp(){
    
75. if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
    
76. GetObj('ISL_Cont').scrollLeft -= Space ;
    
77. }
    
78. function ISL_GoDown(){
    
79. clearInterval(MoveTimeObj);
    
80. if(MoveLock) return;
    
81. clearInterval(AutoPlayObj);
    
82. MoveLock = true;
    
83. ISL_ScrDown();
    
84. MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
    
85. }
    
86. function ISL_StopDown(){
    
87. clearInterval(MoveTimeObj);
    
88. if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
    
89.   Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
    
90.   CompScr();
    
91. }else{
    
92.   MoveLock = false;
    
93. }
    
94. AutoPlay();
    
95. }
    
96. function ISL_ScrDown(){
    
97. if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj
    
98. 
    
99. ('List1').scrollWidth;}
    
100. GetObj('ISL_Cont').scrollLeft += Space ;
     
101. }
     
102. function CompScr(){
     
103. var num;
     
104. if(Comp == 0){MoveLock = false;return;}
     
105. if(Comp < 0){
     
106.   if(Comp < -Space){
     
107.    Comp += Space;
     
108.    num = Space;
     
109.   }else{
     
110.    num = -Comp;
     
111.    Comp = 0;
     
112.   }
     
113.   GetObj('ISL_Cont').scrollLeft -= num;
     
114.   setTimeout('CompScr()',Speed);
     
115. }else{
     
116.   if(Comp > Space){
     
117.    Comp -= Space;
     
118.    num = Space;
     
119.   }else{
     
120.    num = Comp;
     
121.    Comp = 0;
     
122.   }
     
123.   GetObj('ISL_Cont').scrollLeft += num;
     
124.   setTimeout('CompScr()',Speed);
     
125. }
     
126. }
     
127. //--><!]]>
     
128. </script>

คัดลอกไปที่คลิปบอร์ด

ปุ่มเลื่อนซ้ายขวา

  อัพไปไว้ใน static\image\common

ดูเพิ่มเติมได้ที่
http://www.feiba.net/thread-17555-1-1.html

leonna

สุดยอดครับ ขอบคุณ

atripza01

ตอบกระทู้ khonakha ตั้งกระทู้

หมวดอะไรครับ DIY

ใช้ทำยังไงบ้างครับ

khonakha

ต้นฉบับโพสต์โดย atripza01 เมื่อ 2011-3-7 02:15
ตอบกระทู้ khonakha ตั้งกระทู้

หมวดอะไรครับ DIY

หมวดไหนก็ได้....สเปซก็ได้...
เข้าไปสร้างโมดูล..ที่ portal ในแอดมิน
แล้วก็เรียกใช้ diy หน้าเว็บ

phanu

ขอบคุณ ครับ

thailandpostpr

ว่าแค่เอาโค๊ดที่ว่านี้ไปลงที่ไหนครับ(ทั้ง 128 บรรทัดเนี่ย) งง

ผมเข้าใจว่าเอาไปลงที่ DIY ที่เราต้องการให้ภาพมันเลื่อน ใช่ไหมครับ

ไอ่ตัวไฟล์ .rar นี่ไม่มีปัญหาครับหาที่ลงได้

khonakha

ตอบกระทู้ thailandpostpr ตั้งกระทู้

ไปสร้างเป็น โมดูล ที่แอดมินเลยครับ
...แล้วก็เรียกใช้ diy หน้าที่ต้องการได้
...

thailandpostpr

ผมลองแล้วครับ แต่คงทำผิดอะไรซักอย่างมันเป็นแบบนี้น่ะ ผมจะแก้ยังไงครับ

thailandpostpr

ใช่ครับภาพไม่มาครับ

แสดงว่าผมทำถูกแล้วใช่ไหมครับ
1.อัพ panpanluo_button.rar ไปไว้ใน static\image\common----> CHMOD:777
2.เอาโค้ดที่ยาวๆไปวางใน DIY

แล้วภาพมันก็จะขึ้นเลยเหรอครับ

ถ้าผมเป็นโปรแกรมนี้ผมก็คงงงเหมือนกันว่าจะให้เอาภาพที่ไหนมาแสดง

khonakha

ตอบกระทู้ thailandpostpr ตั้งกระทู้

ก็เอาภาพจาก สเปซ อัลบั้ม...
หรือภาพแนบไฟล์ครับ