TShopping

 找回密碼
 註冊
搜索
查看: 1287|回復: 3

[教學] 用 jQuery 做廣告 – 仿 Yahoo 切換式 N 格圖片廣告

[複製鏈接]
發表於 2012-11-3 16:29:40 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
HTML
  1. <body>
  2.         <div class="abgne-yahoo-carousel">
  3.                 <h3>jQuery 熱門外掛</h3>
  4.                 <span class="page"></span>
  5.                 <div class="btn">
  6.                         <a href="#" class="prev">Prev</a>
  7.                         <a href="#" class="next">Next</a>
  8.                 </div>
  9.                 <div class="frame">
  10.                         <ul>
  11.                                 <li>
  12.                                         <a class="thumb" href="#">
  13.                                                 <img title="Android" src="images/a.jpg"/>
  14.                                         </a>
  15.                                 </li>
  16.                                 ~以下省略~
  17.                         </ul>
  18.                 </div>
  19.         </div>
  20. </body>
複製代碼
接著利用 CSS 來裝飾:
  1. .abgne-yahoo-carousel {
  2.         width: 830px;
  3.         height: 230px;
  4.         padding: 10px;
  5.         border: 1px solid #ccc;
  6.         position: relative;
  7. }
  8. .abgne-yahoo-carousel * {
  9.         margin: 0;
  10.         padding: 0;
  11. }
  12. .abgne-yahoo-carousel ul, .abgne-yahoo-carousel li {
  13.         list-style: none;
  14. }
  15. .abgne-yahoo-carousel a img {
  16.         border: none;
  17.         width: 198px;
  18. }
  19. .abgne-yahoo-carousel h3 {
  20.         font-size: 18px;
  21.         height: 30px;
  22. }
  23. .abgne-yahoo-carousel .page {
  24.         position: absolute;
  25.         top: 12px;
  26.         right: 80px;
  27. }
  28. .abgne-yahoo-carousel .btn {
  29.         position: absolute;
  30.         top: 10px;
  31.         right: 5px;
  32.         height: 20px;
  33. }
  34. .abgne-yahoo-carousel .btn a {
  35.         width: 31px;
  36.         height: 24px;
  37.         float: left;
  38.         text-indent: -9999px;
  39. }
  40. .abgne-yahoo-carousel .btn a.prev {
  41.         background: url(images/btn.gif) no-repeat 0 -42px;
  42. }
  43. .abgne-yahoo-carousel .btn a.next {
  44.         background: url(images/btn.gif) no-repeat 0 0;
  45. }
  46. .abgne-yahoo-carousel .frame {
  47.         position: relative;
  48.         overflow: hidden;
  49.         width: 830px;        /* (li 的寬度 + li 的邊框寬度 * 2 ) * 一次要顯示的數量 + li 的右邊界 * (一次要顯示的數量 - 1) */
  50.         height: 200px;
  51. }
  52. .abgne-yahoo-carousel ul {
  53.         width: 99999px;
  54.         position: absolute;
  55. }
  56. .abgne-yahoo-carousel li {
  57.         float: left;
  58.         width: 198px;
  59.         height: 200px;
  60.         position: relative;
  61.         margin-right: 10px;
  62.         border: 1px solid #333;
  63. }
  64. .abgne-yahoo-carousel li .thumb, .abgne-yahoo-carousel li .ovrly, .abgne-yahoo-carousel li h3 {
  65.         position: absolute;
  66. }
  67. .abgne-yahoo-carousel li .ovrly, .abgne-yahoo-carousel li h3 {
  68.         width: 100%;
  69.         height: 32px;
  70.         line-height: 32px;
  71.         text-align: center;
  72.         bottom: 0;
  73. }
  74. .abgne-yahoo-carousel li .ovrly {
  75.         background: #000;
  76. }
  77. .abgne-yahoo-carousel li h3 a {
  78.         color: #fff;
  79. }
  80. .abgne-yahoo-carousel li h3 a:hover {
  81.         color: #f90;
  82. }
複製代碼
基本上當套用上 CSS 後就能看到 9 成的畫面了:

那...jQuery 只要把控制切換及移動的功能補上就可以囉:

javascript
  1. $(function(){
  2.         $('.abgne-yahoo-carousel').each(function(){
  3.                 // 先取得相關的元素及寬度等資料
  4.                 var $this = $(this),
  5.                         $page = $this.find('.page'),
  6.                         $btn = $this.find('.btn'),
  7.                         _frameWidth = $this.find('.frame').width(),
  8.                         $carousel = $this.find('ul'),
  9.                         $items = $carousel.find('li'),
  10.                         _itemLength = $items.length,
  11.                         _set = Math.ceil(_frameWidth / $items.outerWidth(true)),
  12.                         _count = Math.ceil(_itemLength / _set),
  13.                         _width = _set * $items.outerWidth(true) * -1,
  14.                         _speed = 400, _opacity = 0.75, _index = 0;

  15.                 // 用來顯示目前已顯示及總資料筆數資訊
  16.                 $page.html('1 - ' + (_set < _itemLength ? _set : _itemLength) + ' / ' + _itemLength);

  17.                 // 幫每一個 li 加上標題及遮罩
  18.                 $items.each(function(){
  19.                         var $this = $(this),
  20.                                 _href = $this.find('a').attr('href'),
  21.                                 _title = $this.find('img').attr('title');

  22.                         $this.append('<div class="ovrly"></div>' +
  23.                                 '<h3>' +
  24.                                         '<a href="' + _href + '" alt="' + _title + '" title="' + _title + '">' + _title + '</a>' +
  25.                                 '</h3>').find('.ovrly').css('opacity', _opacity);
  26.                 });

  27.                 // 當按了上下頁的按鈕時
  28.                 $btn.find('.prev, .next').click(function(e){
  29.                         // 計算要顯示第幾組
  30.                         _index = Math.floor((e.target.className == 'prev' ? _index - 1 + _count : _index + 1) % _count);
  31.                         var _lastNum = _set * (_index + 1);
  32.                         $page.html((_set * _index + 1) + ' - ' + (_lastNum < _itemLength ? _lastNum : _itemLength) + ' / ' + _itemLength);

  33.                         // 進行動畫
  34.                         $carousel.stop().animate({
  35.                                 left: _index * _width
  36.                         }, _speed);

  37.                         e.preventDefault();
  38.                 }).focus(function(){
  39.                         this.blur();
  40.                 });
  41.         })
  42. });
複製代碼

程式會透過 li 及 .frame 的寬度來計算判斷一次要顯示幾個
Text
(li 的寬度 + li 的邊框寬度 * 2 ) * 一次要顯示的數量 + li 的右邊界 * (一次要顯示的數量 - 1)

所以在範例 2 中只要在 CSS 的部份額外多了一次顯示 3 個的設定:
  1. .demo2, .demo2 .frame {        width: 620px;        /* (li 的寬度 + li 的邊框寬度 * 2 ) * 一次要顯示的數量 + li 的右邊界 * (一次要顯示的數量 - 1) */}
複製代碼
接著就能在不改程式的情況下一次產生多組不同顯示個數的效果囉。


0048.zip (40.57 KB, 下載次數: 0, 售價: 10 金T幣)

 

臉書網友討論
發表於 2014-7-28 09:30:26 | 顯示全部樓層



   浮云啊  不是浮云吧。。

版主招募中

發表於 2014-10-29 09:49:13 | 顯示全部樓層
很不错的啊
爱美肌aimgam.com/


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

本版積分規則



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

GMT+8, 2016-12-8 08:37 , Processed in 0.090565 second(s), 26 queries .

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

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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