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

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

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

แต่ตอนผมคลิก เช่น มี 5 รูปผมคลิกที่ รูปที่ 1 ดันไม่ทำงานซะงั้นอ่ะครับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
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
1
2
3
4
5
6
7
8
9
10
11
12
<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







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ