Inside My Mind: 1月 2010

2010/01/29

廣告輪播功能

因應Case需求，寫了一個廣告輪播的Plugin，這次有用到一個叫做timers的Plugin當輔助。

使用範例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>timer</title>
<style type="text/css">
body {
font-size: 12px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#slide {
width: 400px;
height: 120px;
border: 1px solid;
overflow: hidden;
}
ul.first li {
width: 400px;
background: yellow;
height: 90px;
text-align: center;
line-height: 80px;
}
ul.first li a {
display: block;
width: 400px;
height: 90px;
}
ul.second {
background: pink;
width: 400px;
height: 30px;
}
ul.second li {
float: left;
width: 80px;
height: 30px;
text-align: center;
line-height: 26px;
}
.firstLi {
width:  80px;
height: 30px;
background: black;
color: white;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.timers.js"></script>
<script type="text/javascript" src="js/jquery.dramaSlidePlay.js"></script>
</head>

<body>
<div id="slide">
<ul class="first">
<li><a href="http://www.drama.com.tw">Banner 1</a></li>
<li><a href="http://www.drama.com.tw">Banner 2</a></li>
<li><a href="http://www.drama.com.tw">Banner 3</a></li>
<li><a href="http://www.drama.com.tw">Banner 4</a></li>
<li><a href="http://www.drama.com.tw">Banner 5</a></li>
</ul>
<ul class="second">
<li class="firstLi"><a href="http://www.drama.com.tw">1</a></li>
<li><a href="http://www.drama.com.tw">2</a></li>
<li><a href="http://www.drama.com.tw">3</a></li>
<li><a href="http://www.drama.com.tw">4</a></li>
<li><a href="http://www.drama.com.tw">5</a></li>
</ul>
</div>
<script>
$(function() {
// 只有一個秒數要設定而已
$('#slide').dramaSlidePlay(3);
});
</script>
</body>
</html>

原始碼

/**
* 廣告輪播功能
* 建立日期：2010-01-29
* 作者：David
* Email: chan15tw@gmail.com
*/
(function() {
$.fn.dramaSlidePlay = function($sec) {
return this.each(function() {
var $li1 = $(this).find('ul:first li'), // 第1個li的內容
$li2 = $(this).find('ul:eq(1) li'), // 第2個li的內容
$css = $li2.filter(':first').attr('class'), // 第一個li的css名稱
$total = $li2.size(); // 導覽區li的數量

// 一個以上才進行輪播
if ($total > 1) {
// 將第一個Banner以外的Banner隱藏
$li1.filter(':not(:first)').hide();

// 執行輪播
$().everyTime($sec + 's', 'startPlay', rolling);
}

// 滑鼠移過功能
$li1.hover(function() {
$().stopTime('startPlay');
}, function() {
$().everyTime($sec + 's', 'startPlay', rolling);
});

$li2.each(function($i) {
$(this).hover(function() {
// 停止輪播
$().stopTime('startPlay');

// 改變CSS
$(this)
.addClass($css)
.siblings().removeClass($css);

// 切換Banner
$li1
.hide()
.eq($i)
.show();
}, function() {
// 繼續輪播
$().everyTime($sec + 's', 'startPlay', rolling);
});
});

// 輪播功能
function rolling() {
// 找出目前擁有播放class的li
var $index = $li2.index($li2.filter('.' + $css)),
$k = $index + 1;
if ($k < $total) {
// 往後切換
$li1.
hide()
.eq($k).show();
$li2
.removeClass($css)
.eq($k).addClass($css);
} else {
// 從頭開始
$li1.
hide()
.eq(0).show();
$li2
.removeClass($css)
.eq(0).addClass($css);
}
}
});
}
})(jQuery);

Demo: http://www.drama.com.tw/jquery/slidePlay.html
Download: http://www.drama.com.tw/jquery/js/jquery.dramaSlidePlay.js