[jQuery]仿 Yahoo 標籤式垂直廣告輪播
現在的廣告效果真的都是越做越有趣了，像是有同學問說是否能用 jQuery 做到像Yahoo!奇摩的 Flash 廣告效果，例如：超級商城的流行館或是時尚館
圖片：
這塊 Flash 廣告的基本效果是：當滑鼠移到某一項目時，除了選項的背景樣式會改變之外，還會把左邊的圖片捲動到相對應的廣告。同時若沒把滑鼠移到選項時，它會自動的每隔 N 秒輪播下一個廣告。
從畫面看來，我們至少需要一組廣告圖片及相對應數量的一組選項。這邊筆者都用 ul 來做廣告圖片及選項的區塊：
以下為《HTML》原始碼
<body>
<div id="adblock">
<ul class="showbox">
<li><a href="http://www.google.com/phone"><img src="images/nexus_one.gif" title="Nexus One" /></a></li>
<li><a href="http://www.apple.com/tw/iphone/why-iphone/"><img src="images/iphone.gif" title="iPhone 3GS" /></a></li>
<li><a href="http://www.htc.com/tw/product/hero/overview.html"><img src="images/hero.gif" title="HTC Hero" /></a></li>
<li><a href="http://www.htc.com/tw/product/hd2/overview.html"><img src="images/hd2.gif" title="HTC HD2" /></a></li>
</ul>
<ul class="link">
<li><a href="#">Nexus One</a></li>
<li><a href="#">iPhone 3GS</a></li>
<li><a href="#">HTC Hero</a></li>
<li><a href="#">HTC HD2</a></li>
</ul>
</div>
</body>
有了兩組 ul 之後，接著要讓他們一個在左，一個在右的併排在一起：
以下為《CSS》原始碼
a img {
border: none;
vertical-align: middle;
}
#adblock {
overflow: hidden;
width: 920px; /* 廣告圖片的寬 + 選單圖片最大的寬 */
height: 220px; /* 廣告圖片的高 */
border: 1px solid #ccc;
position: relative;
}
#adblock ul, #adblock li {
margin: 0;
padding: 0;
list-style: none;
}
#adblock ul.showbox, #adblock ul.link {
position: absolute;
}
#adblock ul.showbox li a {
display: block;
height: 220px; /* 廣告圖片的高 */
}
#adblock ul.link {
right: 0;
}
#adblock ul.link li a {
display: block;
width: 180px; /* 滑鼠未移入時的選單圖片寬 */
height: 55px; /* 選單圖片的高 */
position: absolute;
text-indent:20px;
line-height: 55px;
background-color: #ccc;
right: 0;
background: url(images/menu.off.gif);
}
#adblock ul.link li a.selected {
width: 200px; /* 滑鼠移入時的選單圖片寬 */
text-indent: 40px;
background: url(images/menu.on.gif);
} 筆者為了讓選項也能像Yahoo!奇摩的一樣能靠右對齊且左邊是突出去的，因此就讓選項的 position 設成 absolute 之外，還讓它們的 right 都是歸 0 靠右。但這樣選項卻因為沒設定 top 而推擠在一起了：
圖片：
雖然可以一張一張的設定 top 位置，但筆者實在是太懶了，因此就把排位置的動作都交給 jQuery 來代勞：
以下為《JS》原始碼
$(function(){
$('#adblock ul.link li a').each(function(i){
// 把選單排好位置
$(this).css('top', i * 55);
});
}); 圖片：
接下來就讓我們一口氣來完成接下來的事件及動作吧：
以下為《JS》原始碼
$(function(){
// 大廣告圖片的高度及動畫時間
var adHeight = 220,
animateSpeed = 400;
$('#adblock ul.link li a').each(function(i){
// 把選單排好位置
$(this).css('top', i * 55);
}).mouseover(function(){
var $this = $(this),
// 找出目前 li 是在選單中的第幾個(jQuery 1.4)
no = $this.parent().index();
// 先移除有 .selected 的超連結的樣式
$('#adblock ul.link li a.selected').removeClass('selected');
// 再把目前點擊到的超連結加上 .selected
$this.addClass('selected');
// 把 ul.showbox 的 top 移到相對應的高度
$('#adblock ul.showbox').stop().animate({
top: adHeight * no * -1
}, animateSpeed);
}).focus(function(){
$(this).blur();
}).eq(0).mouseover();
}); 有沒有發現到咱們的程式+註解都還比 CSS 還要少咧？其實要寫出一個好的效果，除了程式之外，CSS 所扮演的角色也是有一定的份量的唷！若沒問題的話，預覽時可以看到不輸給 Flash 的廣告效果：
圖片：
只要把滑鼠移到右邊的選項時，左邊的圖片就會自動捲動到相對應的廣告。若要讓它能自動輪播的話，則得再加上一個計時器而控制用的函式：
以下為《JS》原始碼
$(function(){
// 大廣告圖片的高度及動畫時間
// 計時器及輪播時間(毫秒)
var adHeight = 220,
animateSpeed = 400,
timer,
speed = 3500;
function showNext(){
// 找出目前是第幾個選項被展示出來(jQuery 1.4)
var $li = $('#adblock ul.link li'),
no = $li.has('a.selected').index();
// 計算出下一個要展示的廣告選項
no = (no + 1) % $li.length;
// 觸發指定選項的 mouseover 事件
$li.eq(no).children('a').mouseover();
// 再啟動計時器
timer = setTimeout(showNext, speed);
}
$('#adblock ul.link li a').each(function(i){
$(this).css('top', i * 55);
}).hover(function(){
var $this = $(this),
// 找出目前 li 是在選單中的第幾個(jQuery 1.4)
no = $this.parent().index();
// 先移除有 .selected 的超連結的樣式
$('#adblock ul.link li a.selected').removeClass('selected');
// 再把目前點擊到的超連結加上 .selected
$this.addClass('selected');
// 把 ul.showbox 的 top 移到相對應的高度
$('#adblock ul.showbox').stop().animate({
top: adHeight * no * -1
}, animateSpeed);
// 移除計時器
clearTimeout(timer);
}, function(){
// 啟動計時器
timer = setTimeout(showNext, speed);
}).focus(function(){
$(this).blur();
}).eq(0).addClass('selected');
// 當滑鼠移到廣告上時停止計時器..移出後啟動計時器
$('#adblock ul.showbox li').hover(function(){
clearTimeout(timer);
}, function(){
timer = setTimeout(showNext, speed);
});
// 啟動計時器
timer = setTimeout(showNext, speed);
}); 另外要注意的是，此範例中 .has() 及 .index() 的用法是 jQuery 1.4 才支援的，因此要記的引用 1.4 版才行喔。
範例瀏覽：
http://demonstration.abgne.tw/jquery/0017/0017_1.html
http://demonstration.abgne.tw/jquery/0017/0017_2.html
以上內容於2010-01-22 14:48 發表在 http://abgne.tw/jquery/apply-jquery/j ... ahoo-tag-vertical-ad.html
來源:http://www.flycan.com.tw/board/modules/newbb/viewtopic.php?topic_id=2356