TShopping
標題:
jQuery 做廣告 – 仿 POPO 原創市集廣告展示
[打印本頁]
作者:
woff
時間:
2012-11-6 18:39
標題:
jQuery 做廣告 – 仿 POPO 原創市集廣告展示
今天要分享的
它把控制廣告切換的控制項跟要顯示的標題放一起,整個效果還蠻新鮮有趣的。
POPO 原創市集
是搭配
jQuery Cycle Plugin
來使用的,雖然說要仿它的效果,但若用一樣的套件就感覺是真的"仿"了。所以筆者一樣是教各位如果在不使用外掛的情況下來實做囉!
一樣是使用基本的
ul li
當廣告清單囉
HTML
<div id="abgne-block-20111227">
<ul class="lists">
<li><a href="#"><img alt="三星~SunsangNX200" src="images/sunsangNX200_01.jpg" /></a></li>
<li><a href="#"><img alt="3吋的AMOLED液晶顯示螢幕" src="images/sunsangNX200_06.jpg" /></a></li>
<li><a href="#"><img alt="梅干看到這個彎曲的橋墩,感覺相當的有律動感" src="images/sunsangNX200_08_0s.jpg" /></a></li>
<li><a href="#"><img alt="仿義式建築,還有假天空" src="images/sunsangNX200_09s.jpg" /></a></li>
<li><a href="#"><img alt="哈哈~美味的鬆餅加梅干最愛的草莓與奇異果" src="images/sunsangNX200_21s.jpg" /></a></li>
<li><a href="#"><img alt="只要有ShowGirl之處,周遭就圍著滿滿的人" src="images/sunsangNX200_30s.jpg" /></a></li>
<li><a href="#"><img alt="什麼!!看了圖片就想去下訂買車啊!!" src="images/SAM_7833.jpg" /></a></li>
</ul>
</div>
複製代碼
接著再加上少不了的
CSS
:
#abgne-block-20111227 {
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
#abgne-block-20111227 ul, #abgne-block-20111227 ul li {
margin: 0;
padding: 0;
list-style: none;
}
#abgne-block-20111227 .lists {
height: 100%;
position: relative;
overflow: hidden;
}
#abgne-block-20111227 .lists img {
width: 100%;
height: 100%;
border: none;
}
#abgne-block-20111227 .controls {
width: 100%;
height: 35px;
position: absolute;
bottom: 0;
font-size: 13px;
z-index: 2;
}
#abgne-block-20111227 .controls li {
float: left;
}
#abgne-block-20111227 .controls li a {
display: block;
width: 44px; /* 寬度會影響未放大前顯示的字數 */
height: 35px;
line-height: 35px;
margin-right: 1px;
text-align: center;
background: #000;
color: #fff;
text-decoration: none;
}
#abgne-block-20111227 .controls li.selected a {
background: #87bf00;
}
複製代碼
.controls
是用來控制切換用的,這部份我們一樣是用
jQuery
依
li
數量來產生相對應數量的項目:
javaScript
$(function(){
// 先取得相關區塊及塊的高
// 並取得 li
var $block = $('#abgne-block-20111227'),
_blockHeight = $block.height(),
$list = $block.find('li'),
_liOpacity = 0.8,
_animateSpeed = 400,
_selectedIndex = 0;
// 產生下方控制用的 ul li
var $controls = $('<ul class="controls"></ul>'),
_li = '';
$list.each(function(i){
var $this = $(this).css({
position: 'absolute',
top: i==_selectedIndex ? 0 : _blockHeight,
zIndex: i==_selectedIndex ? 1 : 0,
display: i==_selectedIndex ? 'block' : 'none'
}),
$a = $this.find('a');
_li += '<li><a href="'+$a.attr('href')+'">'+$a.find('img').attr('alt')+'</a></li>';
});
// 幫 li 加上透明度
// 並計算 li 基本寬度及最大寬度
var $li = $controls.html(_li).appendTo($block).find('li').css('opacity', _liOpacity),
_liWidth = $li.width(),
_selectedWidth = $block.width() - ($li.length - 1) * _liWidth - 1;
// 當滑鼠移到 li 上時
$li.mouseover(function(){
var $this = $(this),
_index = $this.index();
// 如果現在移上去的跟已顯示是的同一個就跳過
if(_selectedIndex == _index) return;
// 進行動畫切換
$list.eq(_index).stop(true, true).css({
top: _blockHeight,
zIndex: 1,
display: 'block'
}).animate({
top: 0
}, _animateSpeed).end().eq(_selectedIndex).stop(true, true).animate({
top: -_blockHeight
}, _animateSpeed, function(){
$(this).hide();
});
// 把滑鼠移上去的 li 寬度變成最大寬度
// 並將上一個最大寬度的 li 寬度變成基本寬度
//$this.addClass('selected').find('a').width(_selectedWidth).end().siblings('.selected').removeClass('selected').find('a').width(_liWidth-1);
$this.addClass('selected').find('a').width(_selectedWidth);
$li.eq(_selectedIndex).removeClass('selected').find('a').width(_liWidth-1);
_selectedIndex = _index;
}).eq(_selectedIndex).addClass('selected').find('a').width(_selectedWidth);
});
複製代碼
這邊大部份的一些寬度等數值都是用程式計算出來的,所以就算在原本的
ul
中新增
li
也可以不改程式正常運作滴~
這範例比較特別的是它的切換移動方式,不管移到那張都是會接在前一張一起移動的唷!如果想再加上自動輪播的功能時,再補上一段計時器的控制就可以了:
// 用 speed 表示切換輪播的速度
var timer, speed = 1000;
// 用來自動輪播使用
function auto(){
var _index = (_selectedIndex + 1) % $li.length;
$li.eq(_index).mouseover();
timer = setTimeout(auto, speed + _animateSpeed);
}
$block.hover(function(){
// 當滑鼠移入時, 停止計時器
clearTimeout(timer);
}, function(){
// 當滑鼠移出時, 啟動計時器
timer = setTimeout(auto, speed);
});
// 啟動計時器
timer = setTimeout(auto, speed);
複製代碼
作者:
龙达好飞
時間:
2014-6-19 20:36
不是很明白
!
歡迎光臨 TShopping (http://www.tshopping.com.tw/)
Powered by Discuz! X3.2