เกี่ยวกับ VScroll
มันมีปัญหาตรงที่ถ้ารูปมีเยอะๆรูปจะแสดงไม่หมดนะครับ ประมาณนี้ ครับ
<div id="arrowLeft"><<</div>
<div id="contianer-scroll">
<div id="scroller">
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80"/>
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80"/>
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
<img alt="" src="http://www.goragod.com/datas/image/2ustct.jpg" width="80"/>
<img alt="" src="http://www.goragod.com/datas/image/2ustct.jpg" width="80"/>
<img alt="" src="http://www.goragod.com/datas/image/2ustct.jpg" width="80"/>
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
</div>
</div>
<div id="arrowRight">>></div>
<script type="text/javascript">
new VScroll('contianer-scroll','scroller').play();
</script>
<div id="arrowLeft"><<</div>
<div id="contianer-scroll">
<div id="scroller">
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80"/>
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80"/>
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
<img alt="" src="http://www.goragod.com/datas/image/2ustct.jpg" width="80"/>
<img alt="" src="http://www.goragod.com/datas/image/2ustct.jpg" width="80"/>
<img alt="" src="http://www.goragod.com/datas/image/2ustct.jpg" width="80"/>
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" width="80" />
</div>
</div>
<div id="arrowRight">>></div>
<script type="text/javascript">
new VScroll('contianer-scroll','scroller').play();
</script>
<!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=utf-8" />
<title>HScroll (Goragod.com)</title>
<script type="text/javascript" src="http://www.goragod.com/js/gajax.js"></script>
<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="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
<img alt="" src="http://www.goragod.com/datas/image/m7a3c3.jpg" />
</div>
</div>
<div id="arrowRight">>></div>
</div>
<script type="text/javascript">
new VScroll('contianer-scroll','scroller').play();
</script>
<div style="display:block;text-align:center;margin-top:10px">
</div>
</body>
</html>
1.ให้รูปภาพแต่ละรูปเรียงต่อกันไปเลย โดยไม่ต้องขึ้นบรรทัดใหม่
2.แก้ไข CSS เล็กน้อย เช่น ใส่ float-left ให้กับรูปแต่ละรูป เพื่อแก้ไข bug ของบราวเซอร์ และใส่ white-space: nowrap เพื่อป้องกันรูปขึ้นบรรทัดใหม่
หมายเหตุ ผมแก้ไขโค้ดในตัวอย่างให้แล้ว