DIY แสดงภาพเลื่อน
<style type="text/css"><!--
.panpanluoBox{width:960px;overflow:hidden;padding:5px 5 5px 5px;margin:0 auto;}
.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;}
.panpanluoBox .RightBotton{height:114px;width:11px;background:url(static/image/common/panpanluo_button_r.gif) no-repeat 0px0;overflow:hidden;float:left;display:inline;margin:0px 0 0 0;cursor:pointer;}
.panpanluoBox .Cont{width:936px;overflow:hidden;float:left;}
.panpanluoBox .ScrCont{width:10000000px;}
.panpanluoBox .Cont .pic{width:135px;float:left;text-align:center;}
.panpanluoBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}
.panpanluoBox .Cont .pic p{line-height:26px;color:#505050;}
.panpanluoBox .Cont a:link,.panpanluoBox .Cont a:visited{color:#626466;text-decoration:none;}
.panpanluoBox .Cont a:hover{color:#f00;text-decoration:underline;}
.panpanluoBox #List1,.panpanluoBox #List2{float:left;}
-->
</style>
<divclass="module cl ml">
<div class="panpanluoBox">
<div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
<div class="Cont" id="ISL_Cont">
<div class="ScrCont">
<div id="List1">
<!-- 图片载入 begin -->
<div class="pic">
<a href="{threadurl}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a>
<p><a href="{threadurl}" title="{threadsubject}"{target}>{threadsubject}</a></p>
</div>
<!-- 图片载入 end -->
</div>
<div id="List2"></div>
</div>
</div>
<div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
var Speed = 1; //速度(毫秒)
var Space = 5; //每次移动(px)
var PageWidth = 945; //移位宽度
var fill = 0; //整体移动
var MoveLock = false;
var MoveTimeObj;
var Comp = 0;
var AutoPlayObj = null;
GetObj("List2").innerHTML = GetObj("List1").innerHTML;
GetObj('ISL_Cont').scrollLeft = fill;
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
AutoPlay();
function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
function AutoPlay(){ //自动滚动
clearInterval(AutoPlayObj);
AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间
}
function ISL_GoUp(){
if(MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
}
function ISL_StopUp(){
clearInterval(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
CompScr();
}else{
MoveLock = false;
}
AutoPlay();
}
function ISL_ScrUp(){
if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
GetObj('ISL_Cont').scrollLeft -= Space ;
}
function ISL_GoDown(){
clearInterval(MoveTimeObj);
if(MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
ISL_ScrDown();
MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
}
function ISL_StopDown(){
clearInterval(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
CompScr();
}else{
MoveLock = false;
}
AutoPlay();
}
function ISL_ScrDown(){
if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj
('List1').scrollWidth;}
GetObj('ISL_Cont').scrollLeft += Space ;
}
function CompScr(){
var num;
if(Comp == 0){MoveLock = false;return;}
if(Comp < 0){
if(Comp < -Space){
Comp += Space;
num = Space;
}else{
num = -Comp;
Comp = 0;
}
GetObj('ISL_Cont').scrollLeft -= num;
setTimeout('CompScr()',Speed);
}else{
if(Comp > Space){
Comp -= Space;
num = Space;
}else{
num = Comp;
Comp = 0;
}
GetObj('ISL_Cont').scrollLeft += num;
setTimeout('CompScr()',Speed);
}
}
//--><!]]>
</script>ปุ่มเลื่อนซ้ายขวา
อัพไปไว้ใน static\image\common
ดูเพิ่มเติมได้ที่
http://www.feiba.net/thread-17555-1-1.html
สุดยอดครับ ขอบคุณ ตอบกระทู้ khonakha ตั้งกระทู้
หมวดอะไรครับ DIY
ใช้ทำยังไงบ้างครับ ต้นฉบับโพสต์โดย atripza01 เมื่อ 2011-3-7 02:15 static/image/common/back.gif
ตอบกระทู้ khonakha ตั้งกระทู้
หมวดอะไรครับ DIY
หมวดไหนก็ได้....สเปซก็ได้...
เข้าไปสร้างโมดูล..ที่ portal ในแอดมิน
แล้วก็เรียกใช้ diy หน้าเว็บ ขอบคุณ ครับ ว่าแค่เอาโค๊ดที่ว่านี้ไปลงที่ไหนครับ(ทั้ง 128 บรรทัดเนี่ย) งง
ผมเข้าใจว่าเอาไปลงที่ DIY ที่เราต้องการให้ภาพมันเลื่อน ใช่ไหมครับ
ไอ่ตัวไฟล์ .rar นี่ไม่มีปัญหาครับหาที่ลงได้ ตอบกระทู้ thailandpostpr ตั้งกระทู้
ไปสร้างเป็น โมดูล ที่แอดมินเลยครับ
...แล้วก็เรียกใช้ diy หน้าที่ต้องการได้
... แก้ไขครั้งสุดท้ายโดย thailandpostpr เมื่อ 2011-3-14 20:19
ผมลองแล้วครับ แต่คงทำผิดอะไรซักอย่างมันเป็นแบบนี้น่ะ ผมจะแก้ยังไงครับ
ใช่ครับภาพไม่มาครับ sm907dz
แสดงว่าผมทำถูกแล้วใช่ไหมครับ
1.อัพ panpanluo_button.rar ไปไว้ใน static\image\common----> CHMOD:777
2.เอาโค้ดที่ยาวๆไปวางใน DIY
แล้วภาพมันก็จะขึ้นเลยเหรอครับ
ถ้าผมเป็นโปรแกรมนี้ผมก็คงงงเหมือนกันว่าจะให้เอาภาพที่ไหนมาแสดง sm922dzsm922dz ตอบกระทู้ thailandpostpr ตั้งกระทู้
ก็เอาภาพจาก สเปซ อัลบั้ม...
หรือภาพแนบไฟล์ครับ