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

surepee doungthworn 7965 Views 11 Replies
ถามวิธีการเขียนโค๊ดให้ภาพสไลด์ เมื่อเรากดปุ่มลูกศร
คือเมื่อคลิกที่ลูกศร ข้างบน ภาพก้จะสไลด์ขึ้นบน
ถ้าคลิกที่ลูกศรชี้ลง ถาพก้จะสไลด์ลงค่ะ  

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

ขอบคุนค่ะ
.::{เปรียว}::. 29 Jul 2010 14:36
Try, see this link
กรกฎ วิริยะ 30 Jul 2010 08:09
http://www.goragod.com/...5....html
surepee doungthworn 30 Jul 2010 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">&lt;&lt;</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">&gt;&gt;</div>
<script type="text/javascript">
new VScroll('contianer-scroll','scroller').play();
</script>

</body>
</html>


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

กรกฎ วิริยะ 30 Jul 2010 14:59
เรียกใช้ [search]GAJAX[/search] ด้วยครับ

<script type="text/javascript" src="http://www.goragod.com/ajax/gajax.js"></script>
surepee doungthworn 02 Aug 2010 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 Aug 2010 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 Aug 2010 20:31
<div id="arrowTop">&lt;&lt;</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">&gt;&gt;</div>
<script type="text/javascript">
new HScroll('contianer-scroll','scroller').play();
</script>

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

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

gajax.js สามารถโหลดมาเก็บไว้เพื่อทดสอบบนเครื่องแบบ offline ได้เลยนะครับ เวลาเรียกใช้ ก็อ้างอิง path จากตัวเครื่อง
surepee doungthworn 03 Aug 2010 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 Aug 2010 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 Aug 2010 17:03
ขอบคุนค่ะ  ได้แล้วค่ะ
.::{เปรียว}::. 03 Aug 2010 21:46
ไม่ต้องกลัวรำคาญหรอกฮะ
ทุกคนที่นี่ยินดีที่จะช่วยตอบให้
มัวแต่กลัวก็ไม่รู้กันพอดี

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

พยามเข้านะ  สู้ๆ