1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. jQuery教學-淡入淡出的廣告輪播器

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

2010/04/01

梅問題-jQuery教學-jQuery淡入淡出廣告輪播系統

  最近有些朋友問到,關於梅問題中上方的廣告輪播是怎麼弄的, 其實那個作法相當的簡單,比較麻煩的是在CSS設定,剩下就交給jQuery來幫忙處理就行了,透過jQ來抓取資料,再把它重新組合丟到廣告的區塊中,今天梅干就花了點時間,把那廣告輪播作了點整理,讓喜歡此廣告輪播的朋友們能直接套用。


放在<head>…..</head>之間:
#javascript

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


#css

#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; }


放在<body>…..</body>之間:
#html

<!– 廣告顯示區塊 開始–>
<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> <!– 廣告素材資料 結束–>

※若要增減廣告筆數,直接加在廣告素材資料區塊中即可。


  梅干也將原始碼比較需要,注意的地方加了註記,若各位想作調整時,可以直接從註記中找尋相關的程式碼,再進行修改,而各位若要直接套用,只要下載範例完後再把,廣告的圖與文字弄好,就可運作了。


[範例預覽] [範例下載]