jQuery 做廣告 – 仿 POPO 原創市集廣告展示

woff

今天要分享的
它把控制廣告切換的控制項跟要顯示的標題放一起，整個效果還蠻新鮮有趣的。POPO 原創市集 是搭配 jQuery Cycle Plugin 來使用的，雖然說要仿它的效果，但若用一樣的套件就感覺是真的"仿"了。所以筆者一樣是教各位如果在不使用外掛的情況下來實做囉！
一樣是使用基本的 ul li 當廣告清單囉
HTML

1. <div id="abgne-block-20111227">
   
2.                 <ul class="lists">
   
3.                         <li><a href="#"><img alt="三星~SunsangNX200" src="images/sunsangNX200_01.jpg" /></a></li>
   
4.                         <li><a href="#"><img alt="3吋的AMOLED液晶顯示螢幕" src="images/sunsangNX200_06.jpg" /></a></li>
   
5.                         <li><a href="#"><img alt="梅干看到這個彎曲的橋墩，感覺相當的有律動感" src="images/sunsangNX200_08_0s.jpg" /></a></li>
   
6.                         <li><a href="#"><img alt="仿義式建築，還有假天空" src="images/sunsangNX200_09s.jpg" /></a></li>
   
7.                         <li><a href="#"><img alt="哈哈~美味的鬆餅加梅干最愛的草莓與奇異果" src="images/sunsangNX200_21s.jpg" /></a></li>
   
8.                         <li><a href="#"><img alt="只要有ShowGirl之處，周遭就圍著滿滿的人" src="images/sunsangNX200_30s.jpg" /></a></li>
   
9.                         <li><a href="#"><img alt="什麼!!看了圖片就想去下訂買車啊!!" src="images/SAM_7833.jpg" /></a></li>
   
10.                 </ul>
    
11.         </div>
    
12. 
    

複製代碼

接著再加上少不了的 CSS：

1. #abgne-block-20111227 {
   
2.         width: 600px;
   
3.         height: 400px;
   
4.         position: relative;
   
5.         overflow: hidden;
   
6. }
   
7. #abgne-block-20111227 ul, #abgne-block-20111227 ul li {
   
8.         margin: 0;
   
9.         padding: 0;
   
10.         list-style: none;
    
11. }
    
12. #abgne-block-20111227 .lists {
    
13.         height: 100%;
    
14.         position: relative;
    
15.         overflow: hidden;
    
16. }
    
17. #abgne-block-20111227 .lists img {
    
18.         width: 100%;
    
19.         height: 100%;
    
20.         border: none;
    
21. }
    
22. #abgne-block-20111227 .controls {
    
23.         width: 100%;
    
24.         height: 35px;
    
25.         position: absolute;
    
26.         bottom: 0;
    
27.         font-size: 13px;
    
28.         z-index: 2;
    
29. }
    
30. #abgne-block-20111227 .controls li {
    
31.         float: left;
    
32. }
    
33. #abgne-block-20111227 .controls li a {
    
34.         display: block;
    
35.         width: 44px;        /* 寬度會影響未放大前顯示的字數 */
    
36.         height: 35px;
    
37.         line-height: 35px;
    
38.         margin-right: 1px;
    
39.         text-align: center;
    
40.         background: #000;
    
41.         color: #fff;
    
42.         text-decoration: none;
    
43. }
    
44. #abgne-block-20111227 .controls li.selected a {
    
45.         background: #87bf00;
    
46. }

複製代碼

.controls 是用來控制切換用的，這部份我們一樣是用 jQuery 依 li 數量來產生相對應數量的項目：
javaScript

1. $(function(){
   
2.         // 先取得相關區塊及塊的高
   
3.         // 並取得 li
   
4.         var $block = $('#abgne-block-20111227'),
   
5.                 _blockHeight = $block.height(),
   
6.                 $list = $block.find('li'),
   
7.                 _liOpacity = 0.8,
   
8.                 _animateSpeed = 400,
   
9.                 _selectedIndex = 0;
   
10.         // 產生下方控制用的 ul li
    
11.         var $controls = $('<ul class="controls"></ul>'),
    
12.                 _li = '';
    
13.         $list.each(function(i){
    
14.                 var $this = $(this).css({
    
15.                                 position: 'absolute',
    
16.                                 top: i==_selectedIndex ? 0 : _blockHeight,
    
17.                                 zIndex: i==_selectedIndex ? 1 : 0,
    
18.                                 display: i==_selectedIndex ? 'block' : 'none'
    
19.                         }),
    
20.                         $a = $this.find('a');
    
21.                 _li += '<li><a href="'+$a.attr('href')+'">'+$a.find('img').attr('alt')+'</a></li>';
    
22.         });
    
23.         // 幫 li 加上透明度
    
24.         // 並計算 li 基本寬度及最大寬度
    
25.         var $li = $controls.html(_li).appendTo($block).find('li').css('opacity', _liOpacity),
    
26.                 _liWidth = $li.width(),
    
27.                 _selectedWidth = $block.width() - ($li.length - 1) * _liWidth - 1;
    
28.         // 當滑鼠移到 li 上時
    
29.         $li.mouseover(function(){
    
30.                 var $this = $(this),
    
31.                         _index = $this.index();
    
32.                 // 如果現在移上去的跟已顯示是的同一個就跳過
    
33.                 if(_selectedIndex == _index) return;
    
34.                 // 進行動畫切換
    
35.                 $list.eq(_index).stop(true, true).css({
    
36.                         top: _blockHeight,
    
37.                         zIndex: 1,
    
38.                         display: 'block'
    
39.                 }).animate({
    
40.                         top: 0
    
41.                 }, _animateSpeed).end().eq(_selectedIndex).stop(true, true).animate({
    
42.                         top: -_blockHeight
    
43.                 }, _animateSpeed, function(){
    
44.                         $(this).hide();
    
45.                 });
    
46.                 // 把滑鼠移上去的 li 寬度變成最大寬度
    
47.                 // 並將上一個最大寬度的 li 寬度變成基本寬度
    
48.                 //$this.addClass('selected').find('a').width(_selectedWidth).end().siblings('.selected').removeClass('selected').find('a').width(_liWidth-1);
    
49.                 $this.addClass('selected').find('a').width(_selectedWidth);
    
50.                 $li.eq(_selectedIndex).removeClass('selected').find('a').width(_liWidth-1);
    
51.                 _selectedIndex = _index;
    
52.         }).eq(_selectedIndex).addClass('selected').find('a').width(_selectedWidth);
    
53. });
    
54. 
    

複製代碼

這邊大部份的一些寬度等數值都是用程式計算出來的，所以就算在原本的 ul 中新增 li 也可以不改程式正常運作滴~

這範例比較特別的是它的切換移動方式，不管移到那張都是會接在前一張一起移動的唷！如果想再加上自動輪播的功能時，再補上一段計時器的控制就可以了：

1. // 用 speed 表示切換輪播的速度
   
2. var timer, speed = 1000;
   
3. // 用來自動輪播使用
   
4. function auto(){
   
5.         var _index = (_selectedIndex + 1) % $li.length;
   
6.         $li.eq(_index).mouseover();
   
7.         timer = setTimeout(auto, speed + _animateSpeed);
   
8. }
   
9. $block.hover(function(){
   
10.         // 當滑鼠移入時, 停止計時器
    
11.         clearTimeout(timer);
    
12. }, function(){
    
13.         // 當滑鼠移出時, 啟動計時器
    
14.         timer = setTimeout(auto, speed);
    
15. });
    
16. // 啟動計時器
    
17. timer = setTimeout(auto, speed);
    

複製代碼

龙达好飞

  不是很明白
！