A-AA+then

เกี่ยวกับ VScroll

736
มันมีปัญหาตรงที่ถ้ารูปมีเยอะๆรูปจะแสดงไม่หมดนะครับ ประมาณนี้ ครับ

<div id="arrowLeft">&lt;&lt;</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">&gt;&gt;</div>

<script type="text/javascript">
new VScroll('contianer-scroll','scroller').play();
</script>

 

3 ความคิดเห็น

ดาวน์โหลด http://www.goragod.com/js/gajax.js ไปใหม่เลยครับ
1

ใช้ js จากเว็บครับ

<!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">&lt;&lt;</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">&gt;&gt;</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>
2

เป็น bug ของ browser รุ่นใหม่ๆครับ ถ้าสังเกตุให้ดีๆจะเห็นว่า รูปภาพแต่ละรูป จะอยู่ห่างกันมากกว่า 5px อันเนื่องมาจากการสั่งขึ้นบรรทัดใหม่ครับ การแก้ไข สามารถทำได้ดังนี้

1.ให้รูปภาพแต่ละรูปเรียงต่อกันไปเลย โดยไม่ต้องขึ้นบรรทัดใหม่
2.แก้ไข CSS เล็กน้อย เช่น ใส่ float-left ให้กับรูปแต่ละรูป เพื่อแก้ไข bug ของบราวเซอร์ และใส่ white-space: nowrap เพื่อป้องกันรูปขึ้นบรรทัดใหม่

หมายเหตุ ผมแก้ไขโค้ดในตัวอย่างให้แล้ว
3
^