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

28 October 2009 เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee

banner swap อัตโนมัติ jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ banner swap อัตโนมัติ jquery

ดูแล้ว 14,189 ครั้ง

ตัวอย่าง สามารถนำไปประยุกต์ใช้ เช่นใส่รูปภาพแบนเนอร์ อื่นๆ ได้

Javascript code ตัวอย่าง

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

CSS code ตัวอย่าง

<style type="text/css">
div.swapBanner{/* div แสดงข้อมูล */
    display:block;
    width:170px;
    height:170px;
    background-color:#FFFFCC;
    display:none;
}
ul#navBannerSwap{ /* ul สำหรับเก็บ ลำดับรายการ */
    padding:0;margin:0;
    display:block;
    width:170px;
    height:20px;
    float:left;
    background-color:#CCCCFF;
    list-style:none;
}
ul#navBannerSwap li{ /* ลำดับรายการ */
    padding:0;margin:0;
    display:block;
    width:25px;
    height:20px;
    float:left;
    background-color:#FF9999;
    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;
}
</style>

HTML code ตัวอย่าง

<div id="bannerSwap1" class="swapBanner" style="display:block;">
1
</div>
<div id="bannerSwap2" class="swapBanner">
2
</div>
<div id="bannerSwap3" class="swapBanner">
3
</div>
<div id="bannerSwap4" class="swapBanner">
4
</div>
<div id="bannerSwap5" class="swapBanner">
5
</div>
<ul id="navBannerSwap">
<li id="navBannerSwapP1" class="currentShow">1</li>
<li id="navBannerSwapP2">2</li>
<li id="navBannerSwapP3">3</li>
<li id="navBannerSwapP4">4</li>
<li id="navBannerSwapP5">5</li>
</ul>