สร้าง swap แบนเนอร์ effect แบบ fade ด้วย jQuery อย่างง่าย

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

banner jquery swap

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

ดูแล้ว 17,551 ครั้ง

ตัวอย่าง

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">  
/*  กำหนดเวลาสำหรับการเปลี่ยนรูปภาพ 1000 เท่ากับ 1 วินาที*/
var timeSwap=4000;
 
/*  กำหนดตัวแปร array สำหรับเก็บ ลิ้งค์*/
var jsBannerLink=new Array();
jsBannerLink[0]="#Link1";
jsBannerLink[1]="#Link2";
jsBannerLink[2]="#Link3";
 
/*  กำหนดตัวแปร array สำหรับเก็บ รูปภาพ*/
var jsBannerPic=new Array();
jsBannerPic[0]="images/sample_banner01.jpg";
jsBannerPic[1]="images/sample_banner02.jpg";
jsBannerPic[2]="images/sample_banner03.jpg";
 
/*  กำหนดตัวแปร array สำหรับเก็บ ข้อความ*/
var jsBannerText=new Array();
jsBannerText[0]="Text 1";
jsBannerText[1]="Text 2";
jsBannerText[2]="Text 3";
 
var TimeInterV=setTimeout("swapFront()",timeSwap);
var jsKeyPic=0;
var jsEndKeyPic=(jsBannerPic.length)-1;
function swapFront(){
    if(jsKeyPic<jsEndKeyPic){
        jsKeyPic++;
    }else{
        jsKeyPic=0;
    }
    $("img#fadeSwapPic").animate({
        opacity:0.1
    },100,'',function(){
        $("img#fadeSwapPic").attr("src",jsBannerPic[jsKeyPic]);
        $("a#fadeSwapLink").attr("href",jsBannerLink[jsKeyPic]);
        $("div#fadeSwapText").html(jsBannerText[jsKeyPic]);
        $("img#fadeSwapPic").animate({
            opacity:1
        },500);
        setTimeout("swapFront()",timeSwap); 
    });
}   
</script> 

CSS Code ตัวอย่าง

<style type="text/css">
/*  กำหนด CSS ของลิ้งค์*/
a#fadeSwapLink{    
    display:block;
    width:260px;
    height:170px;
    text-decoration:none;
}
/*  กำหนด CSS ของรูป*/
img#fadeSwapPic{
    float:left;
    border:1px solid #CCCCCC;
    background-color:#FFFFFF;
    padding:3px;
}
/*  กำหนด CSS ของข้อความ*/
div#fadeSwapText{
    color:#333333;
}
</style>

HTML Code ตัวอย่าง

<!--แสดงค่าเริ่มต้น-->
<a href="#Link1" id="fadeSwapLink">
<img src="images/sample_banner01.jpg" id="fadeSwapPic" />
<div id="fadeSwapText">Text 1</div>
</a>