還記得筆者曾經寫過一篇仿 Yahoo 切換式兩格圖片廣告嗎?因為原本只是針對一次兩格來做效果,所以就有蠻多網友問說怎樣一次顯示超過兩格呢?剛好趁著 Yahoo! 奇摩新聞原本的效果也因為改版而有一點點不同
所以筆者此次就教各位如何寫個能 N 格切換的效果。
HTML 的部份簡單一點點了:
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <body> <div class="abgne-yahoo-carousel"> <h3>jQuery 熱門外掛</h3> <span class="page"></span> <div class="btn"> <a href="#" class="prev">Prev</a> <a href="#" class="next">Next</a> </div> <div class="frame"> <ul> <li> <a class="thumb" href="#"> <img title="Android" src="images/a.jpg"/> </a> </li> ~以下省略~ </ul> </div> </div> </body> |
接著一樣是利用 CSS 來裝飾:
檢視原始碼 CSS
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | .abgne-yahoo-carousel { width: 830px; height: 230px; padding: 10px; border: 1px solid #ccc; position: relative; } .abgne-yahoo-carousel * { margin: 0; padding: 0; } .abgne-yahoo-carousel ul, .abgne-yahoo-carousel li { list-style: none; } .abgne-yahoo-carousel a img { border: none; width: 198px; } .abgne-yahoo-carousel h3 { font-size: 18px; height: 30px; } .abgne-yahoo-carousel .page { position: absolute; top: 12px; right: 80px; } .abgne-yahoo-carousel .btn { position: absolute; top: 10px; right: 5px; height: 20px; } .abgne-yahoo-carousel .btn a { width: 31px; height: 24px; float: left; text-indent: -9999px; } .abgne-yahoo-carousel .btn a.prev { background: url(images/btn.gif) no-repeat 0 -42px; } .abgne-yahoo-carousel .btn a.next { background: url(images/btn.gif) no-repeat 0 0; } .abgne-yahoo-carousel .frame { position: relative; overflow: hidden; width: 830px; /* (li 的寬度 + li 的邊框寬度 * 2 ) * 一次要顯示的數量 + li 的右邊界 * (一次要顯示的數量 - 1) */ height: 200px; } .abgne-yahoo-carousel ul { width: 99999px; position: absolute; } .abgne-yahoo-carousel li { float: left; width: 198px; height: 200px; position: relative; margin-right: 10px; border: 1px solid #333; } .abgne-yahoo-carousel li .thumb, .abgne-yahoo-carousel li .ovrly, .abgne-yahoo-carousel li h3 { position: absolute; } .abgne-yahoo-carousel li .ovrly, .abgne-yahoo-carousel li h3 { width: 100%; height: 32px; line-height: 32px; text-align: center; bottom: 0; } .abgne-yahoo-carousel li .ovrly { background: #000; } .abgne-yahoo-carousel li h3 a { color: #fff; } .abgne-yahoo-carousel li h3 a:hover { color: #f90; } |
基本上當套用上 CSS 後就能看到 9 成的畫面了:
那...jQuery 只要把控制切換及移動的功能補上就可以囉:
檢視原始碼 JavaScript
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 38 39 40 41 42 43 44 45 46 47 48 | $(function(){ $('.abgne-yahoo-carousel').each(function(){ // 先取得相關的元素及寬度等資料 var $this = $(this), $page = $this.find('.page'), $btn = $this.find('.btn'), _frameWidth = $this.find('.frame').width(), $carousel = $this.find('ul'), $items = $carousel.find('li'), _itemLength = $items.length, _set = Math.ceil(_frameWidth / $items.outerWidth(true)), _count = Math.ceil(_itemLength / _set), _width = _set * $items.outerWidth(true) * -1, _speed = 400, _opacity = 0.75, _index = 0; // 用來顯示目前已顯示及總資料筆數資訊 $page.html('1 - ' + (_set < _itemLength ? _set : _itemLength) + ' / ' + _itemLength); // 幫每一個 li 加上標題及遮罩 $items.each(function(){ var $this = $(this), _href = $this.find('a').attr('href'), _title = $this.find('img').attr('title'); $this.append('<div class="ovrly"></div>' + '<h3>' + '<a href="' + _href + '" alt="' + _title + '" title="' + _title + '">' + _title + '</a>' + '</h3>').find('.ovrly').css('opacity', _opacity); }); // 當按了上下頁的按鈕時 $btn.find('.prev, .next').click(function(e){ // 計算要顯示第幾組 _index = Math.floor((e.target.className == 'prev' ? _index - 1 + _count : _index + 1) % _count); var _lastNum = _set * (_index + 1); $page.html((_set * _index + 1) + ' - ' + (_lastNum < _itemLength ? _lastNum : _itemLength) + ' / ' + _itemLength); // 進行動畫 $carousel.stop().animate({ left: _index * _width }, _speed); e.preventDefault(); }).focus(function(){ this.blur(); }); }) }); |
而程式會透過 li 及 .frame 的寬度來計算判斷一次要顯示幾個:
檢視原始碼 Text
1 | (li 的寬度 + li 的邊框寬度 * 2 ) * 一次要顯示的數量 + li 的右邊界 * (一次要顯示的數量 - 1) |
所以在範例 2 中只要在 CSS 的部份額外多了一次顯示 3 個的設定:
檢視原始碼 CSS
1 2 3 | .demo2, .demo2 .frame { width: 620px; /* (li 的寬度 + li 的邊框寬度 * 2 ) * 一次要顯示的數量 + li 的右邊界 * (一次要顯示的數量 - 1) */ } |
接著就能在不改程式的情況下一次產生多組不同顯示個數的效果囉。
男丁,你好!!
N 格圖片廣告,可以自動播放嗎。
當然是可以輪播, 建議可以先參考 左右不間斷的商品展示輪播
請問一下男丁大大!!!
關於右上角的數字跑掉(變成很多小數點)
是要看哪一行程式去修改阿@@?
不知道為什麼改成自己用的圖片後,就會變成這樣子...
謝謝男丁大大!!
這..要看到你的檔案才知道問題在那
老師好,請教個問題,您的範例是一次顯示四張,按下箭頭後,往下跳四張,假設我一次要顯示五張,然後按下箭頭後,一次跳一張,請問該改哪幾個參數呢?!謝老師
一次要顯示 5 張要改 .abgne-yahoo-carousel 及 .abgne-yahoo-carousel 的寬度, 一次跳一張要改程式中的 _width 為 li 的寬度 * -1
感謝老師的回應,我來試試看
感謝男丁的教學文章,受益良多~
老師您好~請問一下,我套進網頁時功能都正常,但是按左右鍵的時候畫面會自動滾到網頁最上方,本來以為是其他js影響,後來發現在範例上方加入一些內容把範例擠下去,還是會自動滾到最上方,請問該從哪裡修正呢?謝謝老師
這要看到範例才知道為什麼, 所以如果有個測試的檔案寄給我看看的話, 會比較方便找出問題!
https://oa.hyweb.com.tw/hyoa//download?id=b10d35b2d1379654f2f626dfdc3d882f
mp.html裡,捲到比較下面的左右切換,例如文創團體的頁籤那裏,按下左右紐畫面會滾動到最上方
https://oa.hyweb.com.tw/hyoa//download?id=11d37d6d3097f5fc8ccf6cffacfef3a1
老師不好意思,是這個檔案才對,麻煩你了~~大感謝
老師謝謝,我找到問題了!!
因為我少加了e.preventDefault(),謝謝~~
老師好,我遇到一個問題,就是我的圖片切換共做了三欄,第一欄左右切換都正常,但是第三欄點左右按鈕,畫面就會到網頁的最上方(置頂),不知道是哪裡有問題,我的問題和樓上的大大一樣,只是他說少"e.preventDefault(),"我不知道該加在哪..@@
不好意思,因為我剛開始接觸css,很菜鳥啦 …所以能不能幫看一下我的檔案。
謝謝
檔案連結
https://docs.google.com/open?id=0B1UFviFy3858eHMybDN0RDlmbWc
請問一下男丁大大...
已自行參考此範例並結合自動輪播的方法!!
但是現在有一此問題想請教您~
雖然是自動輪播,但到最後一頁時只剩一張,會再往前跳到像是第一頁
但那過程中,假設原本在第三頁,在跳回第一頁時,會經過第二頁的情形
第一:該如何直接跳回第一頁,不會經過第二頁?
第二:可否在第三頁剩餘的空格補足圖片呢!?(如抓取第一頁的幾筆)
再麻煩您指導一下,謝謝。
1.這要多加一些程式...因為 html, css 的關係, 他們的位置就是這樣
2.其實最簡單的方式, 是把 ul li 的內容多複製一整組出來..
男丁老師~我跟Ning遇到相同問題>>>>
「關於右上角的數字跑掉(變成很多小數點)
是要看哪一行程式去修改阿@@?
不知道為什麼改成自己用的圖片後,就會變成這樣子...」
我的範例在https://www.dropbox.com/
要下載的檔案是0048_1.html和圖片壓縮檔images.7z。
謝謝老師~~
直接把檔案寄給我試吧..XD
老師您好,我研究了很久還是不知道要怎麼樣才能一張一張輪播..我的一張圖的大小是236px,
我是jq白癡,希望老師能解答...
要一張一張移的話, 這範例要改較多程式
你可以參考 左右不間斷的商品展示輪播
男丁老師,我發現只要超過四格輪播,一直按next就會出現小數點了,請問有無解決方法?
例如我設定六格輪播,但我總數只有八個,按next到下一頁時page的地方會顯示7~12/10,再按一次next他就開始亂跳了。但我只要再填四格讓第二輪也變成六格,page的地方顯示7~12/12正常,這問題就不會再發生。