เกี่ยวกับ VScroll

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



<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>


 
18 ก.ย. 2556 3 1,580

ดาวน์โหลด 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
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 1024
^