ถามวิธีการเขียนโค๊ดให้ภาพสไลด์ เมื่อเรากดปุ่มลูกศร

surepee doungthworn 29 ก.ค. 2553 11:05 7969 เข้าชม 11 Replies

คือเมื่อคลิกที่ลูกศร ข้างบน ภาพก้จะสไลด์ขึ้นบน
ถ้าคลิกที่ลูกศรชี้ลง ถาพก้จะสไลด์ลงค่ะ

อยากทราบวิธีการเขียนแบบ java script เขียนแบบไหนอะค่ะ

ขอบคุนค่ะ

.::{เปรียว}::. 29 ก.ค. 2553 14:36

Try, see this link

กรกฎ วิริยะ 30 ก.ค. 2553 08:09

http://www.goragod.com/...5....html

surepee doungthworn 30 ก.ค. 2553 11:29

สอบถามค่ะ

คือก้เอาโค๊ดมาจากตัวอย่างอะค่ะ แบบนี้อะค่ะ

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>Untitled Document</title>
<style type="text/css">
#contianer-scroll {
position: relative;
width: 370px;
height: 90px;
overflow: hidden;
border:1px solid #666666;
float: left;
}
#scroller {
position: absolute;
width:630px;
height: 80px;
}
#scroller img { /* style ของรูปภาพ */
display: inline;
margin: 5px;
}
#arrowLeft,#arrowRight { /* stylle ของ ลูกศรสำหรับเลื่อนรูปภาพ อาจใช้รูปแทนได้ */
height: 90px;
line-height: 90px;
float: left;
cursor: pointer;
}
</style>
</head>

<body>

<div id="arrowLeft"><<</div>
<div id="contianer-scroll">
<div id="scroller"><img alt="" src="images/bath.jpg" /><img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /></div>
</div>
<div id="arrowRight">>></div>
<script type="text/javascript">
new VScroll('contianer-scroll','scroller').play();
</script>

</body>
</html>

แต่มันติดเออเรอ ว่า VScoll is not defined หรือเรียงโค๊ดไม่ถูกรึป่าวค่ะ รบกวนด้วยนะค่ะ

กรกฎ วิริยะ 30 ก.ค. 2553 14:59

เรียกใช้ [search]GAJAX[/search] ด้วยครับ

<script type="text/javascript" src="http://www.goragod.com/ajax/gajax.js"></script>

surepee doungthworn 02 ส.ค. 2553 13:47

ขอบคุนค่ะ แต่ขอถามต่ออีกนิดนะค่

ตอนนี้เอามาประยุกเปน แนวตั้ง อะค่ะ มันไม่สไลด์อะค่ะ

พอดีทำเปนแบบ 2 คอลัมอะค่ะ ผสมกับ table อะค่ะ แบบนี้อะค่ะ

<?
include("../config/config.php");
include("../config/connect.php");
include("../config/func.inc.php");
$sql_pic="select * from product_pic where display='1' order by level asc";
$result_pic=get_rsltset($sql_pic);
$nr_pic=count($result_pic);
?>
<script type="text/javascript" src="http://www.goragod.com/ajax/gajax.js"></script>
<style>

#contianer-scroll {
position:relative;top:10px;
width: 90px;
height: 370px;
overflow: hidden;
border:1px solid #666666;
float: left;
}
#scroller {
position: absolute;
width:80px;
height: 630px;
}
#scroller img { /* style ของรูปภาพ */
display: inline;
margin: 5px;
}

#up{position:relative; left:10px; top:5px; width:80px; height:20px; cursor: pointer; background-color:#0000FF;}
#dw{position:absolute; left:20px; bottom100px; width:80px; height:20px;cursor: pointer; background-color:#993399;}
</style>

<tr>
     <td align="center"</td>
</tr>
      <tr>
          <td align="center"></td>
       </tr>
              <tr>
                    <td align="center">
                    <table width="79" border="0" cellpadding="0" cellspacing="5" bgcolor="#F5F5F5">
              <tr>
<div id="up">up</div>
<div id="contianer-scroll">
<div id="scroller">
<? for($p=0;$p<$nr_pic;$p++){?><td> <img src="../images/product/<?=$result_pic[$p]['pic']?>" width="70" height="54" border="0" /></td><? if(($p+1)%2==0){ echo "<tr></tr>"; } }?>
</div>
</div>
<div id="dw">down</div>
<script type="text/javascript">
new HScroll('contianer-scroll','scroller').play();
</script>
</tr>
</table>
         </td>
</tr>
          <tr>
                   <td align="center"></td>
                  </tr>
                  <tr>
                    <td align="center"><img src="images/12x12.jpg" width="12" height="12" /></td>
                  </tr>
</table>

.::{เปรียว}::. 02 ส.ค. 2553 17:58

ดูจาก Title Bar แล้ว
คุณกำลังทดสอบอยู่บน Localhost
จากนั้นคุณเรียกใช้งาน gajax โดยอ้างอิงไปยัง http://www.goragod.com
โดย
<script type="text/javascript" src="http://www.goragod.com/ajax/gajax.js"></script>
นั่นหมายความว่า คุณกำลังร้องขอไปยังเซิร์ฟเวอร์ของเว็บ http://www.goragod.com
ปัญหาคือ ขณะที่คุณทดสอบอยู่นั้น คุณได้เชื่อมต่อ Internet อยู่หรือไม่

เสริม : #dw น่าจะกำหนด position:relative; มากกว่านะ

กรกฎ วิริยะ 02 ส.ค. 2553 20:31

<div id="arrowTop"><<</div>
<div id="contianer-scroll">
<div id="scroller"><img alt="" src="images/bath.jpg" /><img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /></div>
</div>
<div id="arrowBottom">>></div>
<script type="text/javascript">
new HScroll('contianer-scroll','scroller').play();
</script>

ตรงลูกศร ต้องใช้ arrowTop สำหรับขึ้น และ arrowBottom สำหรับลง ครับ

ส่วน CSS ก็ดู ok ครับ เพราะมันแค่ปรับ กว้างและยาว ให้เป็น แนวตั้งเท่านั้น

gajax.js สามารถโหลดมาเก็บไว้เพื่อทดสอบบนเครื่องแบบ offline ได้เลยนะครับ เวลาเรียกใช้ ก็อ้างอิง path จากตัวเครื่อง

surepee doungthworn 03 ส.ค. 2553 12:45

รบกวนด้วยนะค่ะ (กลัวรำคานอะค่ะ ต้องขอโทษด้วยนะค่ะ)

เครื่องต่ออินเตอร์เนตค่ะ

ตอนนี้เขียน css มาใหม่ ให้มันออก 2 คอลัมต์

แต่มันไม่สไลด์อะค่ะ ไม่ทราบว่าผิดตรง css รึป่าวอะค่ะ

<?
include('config/config.php');
include('config/connect.php');
include('config/func.inc.php');

$sql_pic="select * from product_pic where display='1' order by level asc";
$result_pic=get_rsltset($sql_pic);
$nr_pic=count($result_pic);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript" src="http://www.goragod.com/ajax/gajax.js"></script>
<style>

#content{
    margin:auto;
    width:150px;
    height:410px;
    padding:2px;
    text-align:center;
    float:left;
    border:1px solid #666666;

}
#contianer-scroll{
    margin:auto;
    width:145px;
    height:400px;
    padding:2px;
    float:left;
    clear:both;
}

#contianer-scroll #scroller{
    margin:auto;
    width:145px;
    height:400px;
    padding:2px;
    float:left;
    clear:both;
}

#contianer-scroll #scroller .scroller2{
    margin:1px;
    width:70px;
    height:55px;
    padding:0px;
    float:left;
}

#arrowTop{ margin:auto; width:80px; height:20px; cursor: pointer; text-align:center;}
#arrowBottom{ width:80px; height:20px;cursor: pointer; clear:both; text-align:center; }

</style>
</head>

<body>

<div id="content">
<div id="arrowTop">up</div>
<div id="contianer-scroll">
<div id="scroller"><? for($p=0;$p<$nr_pic;$p++){?><div class="scroller2"><img src="images/product/<?=$result_pic[$p]['pic']?>" width="70" height="54" border="0" /></div><? }?></div>
</div>
<div id="arrowBottom">down</div>
</div>
<script type="text/javascript">
new HScroll('contianer-scroll','scroller').play();
</script>
</body>
</html>

กรกฎ วิริยะ 03 ส.ค. 2553 13:34

ลองทดสอบต้นฉบับ บนเว็บผมดูใหม่ครับ

แค่เปลี่ยนจาก
1.VScroll เป็น HScroll
2.ปุ่มเปลี่ยนเป็น #arrowTop และ #arrowBottom
3.แก้ไข CSS ของ #container-scroll และ #scroller โดยกลับ width เป็น height และ height เป็น width

นอกนั้นไม่ต้องแก้ไขอะไร แล้วทดสอบดู จากนั้นค่อยๆแก้ CSS ทีละจุดเอา

ปล. CSS ผิดมันไม่ทำงานครับ และ ความสูงของ #scroller ต้องมากกกว่า #container-scroll ครับ

** เขียนตัวอย่างให้แล้ว กลับไปดูที่บทความครับ

surepee doungthworn 03 ส.ค. 2553 17:03

ขอบคุนค่ะ ได้แล้วค่ะ

.::{เปรียว}::. 03 ส.ค. 2553 21:46

ไม่ต้องกลัวรำคาญหรอกฮะ
ทุกคนที่นี่ยินดีที่จะช่วยตอบให้
มัวแต่กลัวก็ไม่รู้กันพอดี

เพียงแต่ว่าการที่กล้าที่จะถามนั้น ต้องคิดนิดนึงว่าจะถามยังไง
มีข้อมูลประกอบในคำถามนั้นเพียงพอที่จะวิเคราะห์หาคำตอบให้
ได้มากน้อยแค่ไหน

พยามเข้านะ

สู้ๆ

เว็บไซต์และโครงการในเครือ