Javascript, 網頁設計

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

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

放在<head>.....</head>之間:
#javascript
<script type="text/javascript" src="https://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("<ul />");
for(var i=1;i<=myImages.length;i++){
$(".link ul").append("<li>"+i+"</li>");
}

//滑鼠點選頁籤切換
$(".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 > *: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<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="https://www.minwt.com"><img src="images/AD01.jpg" title="iSing99愛唱久久" alt="KTV唱一天,iSing99歡唱一整年" rel="2009-12-03"/></a>
    <a href="https://www.minwt.com"><img src="images/AD02.jpg" title="瑪莎拉帝" alt="極致品味,享受奔馳快感"  rel="2009-12-04"/></a>
    <a href="https://www.minwt.com"><img src="images/AD03.jpg" title="Jenova時尚眼影" alt="今夏最夯的眼影款都在Jenova" rel="2009-12-05"/></a> 
</div>
<!-- 廣告素材資料 結束-->

※若要增減廣告筆數,直接加在廣告素材資料區塊中即可。
  梅干也將原始碼比較需要,注意的地方加了註記,若各位想作調整時,可以直接從註記中找尋相關的程式碼,再進行修改,而各位若要直接套用,只要下載範例完後再把,廣告的圖與文字弄好,就可運作了。
[範例預覽] [範例下載]
UAG軍規iPhone防摔殼