jQuery教學－淡入淡出的廣告輪播器

<script type=“text/javascript” src=“http://code.jquery.com/jquery-latest.pack.js"></script>
<script type=“text/javascript”>
$(function(){
    var timer;
    var img = -1;
    //輪播停留時間
    var speed = 10000;


//淡入淡出時間　
var fOut = 500, fIn = 1000;
var myImages = $(".list a");    
$("#TopAD").slideDown();

$(".link").append("&lt;ul /&gt;");
for(var i=1;i&lt;=myImages.length;i++){
    $(".link ul").append("&lt;li&gt;"+i+"&lt;/li&gt;");
}

//滑鼠點選頁籤切換
$(".link li").click(function(){
    var idx = $(this).text() - 1;
    img = idx;
    //抓索引值
    var _link = myImages.eq(idx);
    //取得連結、標題、內文、日期...
    var adlink=_link.attr("href");
    var adtitle=_link.find("img").attr("title");
    var addate=_link.find("img").attr("rel");
    var adbody=_link.find("img").attr("alt");
    var adsrc=_link.find("img").attr("src");
    var adlink=_link.attr("href");
    var adtarget=_link.attr("target");

    /*淡入淡出效果*/
    $(".TopAdleft &gt; *:not(.link)").fadeOut(fOut, function(){
        $(".TopAdleft h2").find("a").attr({
            href: adlink,
            target: adtarget
        });
        $(".TopAdleft h2 a").html(adtitle);
        //post by minwt on←自可更換成張貼者的作者名稱 
        $(".TopAdleft .AdDate").html("Post by Minwt on"+addate);

        $(".TopAdleft .Adbody a").html(adbody);
        $(".TopAdleft .Adbody").find("a").attr({
            href: adlink,
            target: adtarget
        });
    }).fadeIn(fIn);
    $(".TopAdright").fadeOut(fOut, function(){
        $(".TopAdright").find("a").attr({
            href: adlink,
            target: adtarget
        });
        $(".TopAdright").find("img").attr("src",adsrc);
    }).fadeIn(fIn); 

    $(this).removeClass("off").addClass("on")
        .siblings().removeClass("on").addClass("off");      
});

//當滑鼠滑入區塊停止自動播放
$("#TopAD").hover(function(){
    clearTimeout(timer);
}, function(){
    timer = setTimeout(autoShow, speed);
});

//自動輪播
function autoShow(){
    img = (img+1&lt;myImages.length) ? img+1 : 0;
    $(".link li").eq(img).click();
    timer = setTimeout(autoShow, speed);
}

//啟動自動輪播
autoShow(); 


});
</script>

#TopAD{width:970px; height:240px; background:url(images/TopAD.jpg); padding:10px;}
h2{padding:15px 10px 5px 10px; margin:0;}
#TopAD h2 a{
    padding-left:10px;
    color:#fff;
    font-size:24px;
    line-height:1.3em;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
#TopAD .AdDate{
    display:block;
    margin-left:7px;
    clear:both;
    width:450px;
    color:#f2163f;
    font-size:11px;
    padding:0 15px;
    font-family: Arial, Helvetica, sans-serif;
}
#TopAD .Adbody {
    width:450px;
    height:120px;
    clear:both;
    margin-top:15px;
    margin-left:8px;
    padding:0 15px;}


#TopAD .Adbody a{

    font-size:13px;
    color:#c6c6c6;

    text-decoration: none;
    line-height:1.7em;
}
#TopAD .TopAdleft{float:left; width:500px;}
#TopAD .TopAdright{float:right; width:340px; height:215px; margin-top:13px; margin-right:81px;}

#TopAD .link {padding-left:25px; margin-top:15px; width:500px; height:20px;}
#TopAD .link ul {
    padding:0;
    margin:0;
    list-style-type: none;
    display: block;
    padding-top:1px;
}
#TopAD .link ul li {
    width: 14px;
    height: 14px;
    float: left;
    display: block;
    color: #fff;
    text-align: center;
    margin: 1px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
#TopAD .link ul li.on {
    background: #fff;
    color: #000;
}
#TopAD .link ul li.off {
    background: #111;
    color: #fff;
}

<!– 廣告顯示區塊 開始–>
<div id=“TopAD”>
    <div class=“TopAdleft”>
        <h2><a href=“#”></a></h2>
        <span class=“AdDate”></span>
        <div class=“Adbody”><a href=“#”></a></div>
        <div class=“link”></div>
    </div>
      <div class=“TopAdright”><a href=“#”><img src=“” border=“0”/></a></div>

</div>
<!– 廣告顯示區塊 結束–>


<!–　廣告素材資料 開始–>
<div class=“list” style=“display:none;”>
    <a href=“http://www.minwt.com"><img src=“images/AD01.jpg” title=“iSing99愛唱久久” alt=“KTV唱一天，iSing99歡唱一整年” rel=“2009-12-03”/></a>
    <a href=“http://www.minwt.com"><img src=“images/AD02.jpg” title=“瑪莎拉帝” alt=“極致品味，享受奔馳快感”  rel=“2009-12-04”/></a>
    <a href=“http://www.minwt.com"><img src=“images/AD03.jpg” title=“Jenova時尚眼影” alt=“今夏最夯的眼影款都在Jenova” rel=“2009-12-05”/></a>
</div>
<!–　廣告素材資料 結束–>