หมุน สลับ แบนเนอร์ในแนวนอน ด้วย jQuery อย่างง่าย

02 February 2010 เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee

หมุน banner jquery แนวนอน

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

ดูแล้ว 11,228 ครั้ง

ตัวอย่าง

CSS code ตัวอย่าง

<style type="text/css">
div.containBanner{
    position:relative;
    display:block;
    top:80px;
    left:150px; 
    background-color:#33CCFF;
    overflow:hidden;
}
ul.areaBanner,ul.areaBanner li{
    list-style:none;
    margin:0;
    padding:0;
}
ul.areaBanner{
    position:absolute;
    left:0;
    top:0;
    display:block;
    white-space:nowrap;
}
ul.areaBanner li{
    position:relative;
    display:block;
    float:left;
}
</style>

HTML code ตัวอย่าง

<div class="containBanner">
<ul class="areaBanner">
<li style="background-color:#3399CC;"></li>
<li style="background-color:#66CCCC;"></li>
<li style="background-color:#FFFF99;"></li>
<li style="background-color:#99CC99;"></li>
<li style="background-color:#CC9999;"></li>
</ul>
</div>

jQuery ตัวอย่าง

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
    var timeSwap=2000;
    var listWidth=250;
    var listHeight=100;
    var areaWidth=$("ul.areaBanner li").length*listWidth;
    var a_banner=1;
    var runIT=function(){
        a_banner=(a_banner>=$("ul.areaBanner li").length)?0:a_banner;
        var norwLeft=$("ul.areaBanner li").offset().left;
        norwLeft=a_banner*listWidth;
        $("ul.areaBanner li").animate({
            left:-norwLeft
        },500);
        a_banner++;
    }
    var bannerSwap=function(){
        $("div.containBanner").width(listWidth).height(listHeight);
        $("ul.areaBanner li").width(listWidth).height(listHeight);
        $("ul.areaBanner").width(areaWidth);
        setInterval(function(){
            runIT();
        },timeSwap);    
    }
    bannerSwap();
});
</script>