Swap Banner แบนเนอร์แบบสลับอัตโนมัติ ด้วย jQuery
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา Swap Banner แบนเนอร์แบบสลับอัตโนมัติ ด้วย jQuery
Swap Banner แบนเนอร์แบบสลับอัตโนมัติ ด้วย jQuery
Copy
แต่ตอนผมคลิก เช่น มี 5 รูปผมคลิกที่ รูปที่ 1 ดันไม่ทำงานซะงั้นอ่ะครับ
div.swapBanner{/* div แสดงข้อมูล */
display:block;
width:420px;
height:250px;
background-color:#666666;
display:none;
/*padding:8px 5px 3px 8px;*/
}
ul#navBannerSwap{ /* ul สำหรับเก็บ ลำดับรายการ */
padding:0;
margin:0;
display:block;
width:420px;
height:10px;
float:left;
background-color:#666666;
list-style:none;
}
ul#navBannerSwap li{ /* ลำดับรายการ */
padding:0;
margin:0;
display:block;
width:25px;
height:20px;
float:left;
background-color:#666666;
list-style:none;
text-align:center;
cursor:pointer;
margin-right:2px;
}
ul#navBannerSwap li:hover{ /* ลำดับรายการเมื่อเอาเม้าวางไว้เหนือ */
background-color:#00CCFF;
}
ul#navBannerSwap li.currentShow{ /* ลำดับรายการที่กำลังแสดง หรือถูกคลิก หรือถูกเลือก */
background-color:#00CCFF;
}
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript">
$(function(){
$("ul#navBannerSwap li").click(function(){ // เมื่อลำดับรายการถูกคลิก
$("ul#navBannerSwap li").siblings("li").removeClass("currentShow");
$(this).addClass("currentShow");
var gIDdiv=$(this).html();
var showIDdiv="bannerSwap"+gIDdiv;
$("div.swapBanner:visible").hide();
$("div#"+showIDdiv).show();
clearTimeout(SwapTimeout);
SwapTimeout=setTimeout("swapBannerFn("+idBanner+")",timeSwap+timeWaitNextSwap);
});
});
var idBanner=1; // ค่าเริ่มต้น
var timeSwap=3000; // กำหนดเวลาสำหรับการสลับข้อมูล 1000 เท่ากับ 1 วินาที
var timeWaitNextSwap=4000; // เวลารอการเริ่มต้นการสลับข้อมูลใหม่ หลังจากคลิกลำดับ
var numMaxSwap=5; // จำนวนรายการข้อมูล
var SwapTimeout=setTimeout("swapBannerFn("+idBanner+")",timeSwap);
function swapBannerFn(idBanner){ // ฟังก์ชันสลับข้อมูล
if(idBanner<numMaxSwap){
idBanner++;
var showIDdiv="bannerSwap"+idBanner;
$("div.swapBanner:visible").hide();
$("div#"+showIDdiv).show();
$("ul#navBannerSwap li").removeClass("currentShow");
$("ul#navBannerSwap li#navBannerSwapP"+idBanner).addClass("currentShow");
if(idBanner==numMaxSwap){
idBanner=0;
SwapTimeout=setTimeout("swapBannerFn("+idBanner+")",timeSwap);
}else{
SwapTimeout=setTimeout("swapBannerFn("+idBanner+")",timeSwap);
}
}
}
</script>
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ