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>
Boy415
15-03-2011
00:44:04
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ