GORAGOD.com

freelance, web developer, web designer, hosting, domain name

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

surepee doungthworn

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

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

ขอบคุนค่ะ
29 ก.ค. 2553 11 7,127
.::{เปรียว}::.

#1
กรกฎ วิริยะ

#2
surepee doungthworn

สอบถามค่ะ 

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

<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  หรือเรียงโค๊ดไม่ถูกรึป่าวค่ะ  รบกวนด้วยนะค่ะ

#3
กรกฎ วิริยะ

เรียกใช้ GAJAX ด้วยครับ

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

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

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

พอดีทำเปนแบบ 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>



#5
.::{เปรียว}::.

ดูจาก 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; มากกว่านะ




#6
กรกฎ วิริยะ

<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 จากตัวเครื่อง
#7
surepee doungthworn

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

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

ตอนนี้เขียน 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>

#8
กรกฎ วิริยะ

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

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

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

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

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

ขอบคุนค่ะ  ได้แล้วค่ะ
#10
.::{เปรียว}::.

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

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

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

#11
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 2M
^