Swap Banner แบนเนอร์แบบสลับอัตโนมัติ ด้วย jQuery

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา Swap Banner แบนเนอร์แบบสลับอัตโนมัติ ด้วย jQuery

Swap Banner แบนเนอร์แบบสลับอัตโนมัติ ด้วย jQuery

แต่ตอนผมคลิก เช่น มี 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

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
<div id="bannerSwap1" class="swapBanner" style="display:block;"><img src="images/phomotion/IMG_01.jpg" /></div>
<div id="bannerSwap2" class="swapBanner"><img src="images/phomotion/IMG_02.jpg" /></div>
<div id="bannerSwap3" class="swapBanner"><img src="images/phomotion/IMG_03.jpg" /></div>
<div id="bannerSwap4" class="swapBanner"><img src="images/phomotion/IMG_04.jpg" /></div>
<div id="bannerSwap5" class="swapBanner"><img src="images/phomotion/IMG_05.jpg" /></div>
<ul id="navBannerSwap">
<li id="navBannerSwapP1" class="currentShow">SET A</li>
<li id="navBannerSwapP2">SET B</li>
<li id="navBannerSwapP3">SET C</li>
<li id="navBannerSwapP4">SET D</li>
<li id="navBannerSwapP5">SET F</li>
</ul>

 



boy415 15-03-2011 00:44
 ความคิดเห็นที่ 2

ตามรูปเลยครับพอคลิก เช่น set a หรือ set b ก็จะเป็นตามรูปเลยคลับ จะบีบไม่เห็นรุปเลยครับ



boy415 15-03-2011 00:49
 ความคิดเห็นที่ 3

ได้แล้วครับ ผมเผลอไปตั้ง เลข ผิดครับ



boy415 15-03-2011 08:45
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ