TShopping

 找回密碼
 註冊
搜索
查看: 1034|回復: 1

[教學] jQuery 做廣告 – 仿 POPO 原創市集廣告展示

[複製鏈接]
發表於 2012-11-6 18:39:55 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
今天要分享的
它把控制廣告切換的控制項跟要顯示的標題放一起,整個效果還蠻新鮮有趣的。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>

複製代碼

接著再加上少不了的 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 是用來控制切換用的,這部份我們一樣是用 jQueryli 數量來產生相對應數量的項目:
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. });

複製代碼

這邊大部份的一些寬度等數值都是用程式計算出來的,所以就算在原本的 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);
複製代碼


 

臉書網友討論
發表於 2014-6-19 20:36:53 | 顯示全部樓層


  不是很明白

版主招募中

您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-5 06:30 , Processed in 0.065129 second(s), 22 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表