"上下垂直選項式廣告輪播"
Bootstrap 3.3.0 Snippet by taironlife

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div id="abgneBlock">
<div id="player">
<ul class="list">
<li><a target="_blank" href="#"><img src="http://abgne.tw/wp-content/uploads/2010/09/jquery_up_and_down_vertical_ad_2.png"></a></li>
<li><a target="_blank" href="#"><img src="http://abgne.tw/wp-content/uploads/2010/09/jquery_up_and_down_vertical_ad_1.png"></a></li>
<li><a target="_blank" href="#"><img src="http://abgne.tw/wp-content/uploads/2010/09/jquery_up_and_down_vertical_ad_0.png"></a></li>
<li><a target="_blank" href="#"><img src="http://abgne.tw/wp-content/uploads/2010/09/jquery_up_and_down_vertical_ad_2.png"></a></li>
<li><a target="_blank" href="#"><img src="http://abgne.tw/wp-content/uploads/2010/09/jquery_up_and_down_vertical_ad_1.png"></a></li>
<li><a target="_blank" href="#"><img src="http://abgne.tw/wp-content/uploads/2010/09/jquery_up_and_down_vertical_ad_0.png"></a></li>
</ul>
</div>
</div>
</div>
</div>
<a class="btn" href="http://abgne.tw/jquery/apply-jquery/jquery-up-and-down-vertical-ad.html">go</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#abgneBlock {
padding: 5px;
width: 450px;
height: 286px;
border: 1px solid #ccc;
}
#abgneBlock #player {
position: relative;
overflow: hidden;
height: 100%;
}
#abgneBlock ul.list {
padding: 0;
margin: 0;
list-style: none;
position: absolute;
width: 100%;
height: 100%;
}
#abgneBlock ul.list li {
float: left;
width: 100%;
height: 100%;
}
#abgneBlock .list img{
width: 100%;
height: 100%;
border: 0;
}
#abgneBlock ul.playerControl {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
bottom: 5px;
right: 5px;
height: 20px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function(){
// 先取得必要的元素並用 jQuery 包裝
// 再來取得 $slides 的高度及設定動畫時間
var $block = $('#abgneBlock'),
$slides = $('#player ul.list', $block),
_height = $slides.find('li').height(),
$li = $('li', $slides),
_animateSpeed = 400,
timer, _speed = 4000;
// 產生 li 選項
var _str = '';
for(var i=0, j=$li.length;i<j;i++){
// 每一個 li 都有自己的 className = playerControl_號碼
_str += '<li class="playerControl_' + (i+1) + '">' + (i+1) + '</li>';
}
// 產生 ul 並把 li 選項加到其中
// 並幫 li 加上 mouseover 事件
var $controlLi = $('<ul class="playerControl"></ul>').html(_str).appendTo($slides.parent()).find('li');
$controlLi.mouseover(function(){
clearTimeout(timer);
var $this = $(this);
$this.addClass('current').siblings('.current').removeClass('current');
// 移動位置到相對應的號碼
$slides.stop().animate({
top: _height * $this.index() * -1
}, _animateSpeed, function(){
if(!_isOver) timer = setTimeout(moveNext, _speed);
});
return false;
}).eq(0).mouseover();
// 當滑鼠移到 $block 時則停止輪播
// 移出時則繼續輪播
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Awesome Landing Page

Questions / Comments: