筆者此次要教的範例是把上一次的「上下垂直選項式廣告輪播」改成左右水平的移動,同時還想要把按鈕移動到置中的位置。
這次的 HTML 比上一個少了 #player 的區塊:
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 11 | <body> <div id="abgneBlock"> <ul class="list"> <li><a target="_blank" href="#"><img src="images/01.jpg"></a></li> <li><a target="_blank" href="#"><img src="images/02.jpg"></a></li> <li><a target="_blank" href="#"><img src="images/03.jpg"></a></li> <li><a target="_blank" href="#"><img src="images/04.jpg"></a></li> <li><a target="_blank" href="#"><img src="images/05.jpg"></a></li> </ul> </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 | #abgneBlock { width: 940px; height: 279px; position: relative; overflow: hidden; border: 1px solid #ccc; } #abgneBlock ul.list { padding: 0; margin: 0; list-style: none; position: absolute; width: 9999px; height: 100%; } #abgneBlock ul.list li { float: left; width: 940px; height: 100%; } #abgneBlock .list img{ width: 100%; height: 100%; border: 0; } #abgneBlock ul.playerControl { margin: 0; padding: 0; list-style: none; position: absolute; bottom: 5px; right: 5px; height: 14px; } #abgneBlock ul.playerControl li { float: left; width: 23px; height: 14px; cursor: pointer; margin: 0px 2px; background: url(images/rect_ctrl.png) no-repeat 0 0; } #abgneBlock ul.playerControl li.current { background-position: -23px 0; } |
最後就是請出 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 | $(function(){ // 先取得必要的元素並用 jQuery 包裝 // 再來取得 $block 的高度及設定動畫時間 var $block = $('#abgneBlock'), $slides = $('ul.list', $block), _width = $block.width(), $li = $('li', $slides), _animateSpeed = 600; // 產生 li 選項 var _str = ''; for(var i=0, j=$li.length;i<j;i++){ // 每一個 li 都有自己的 className = playerControl_號碼 _str += '<li class="playerControl_' + (i+1) + '"></li>'; } // 產生 ul 並把 li 選項加到其中 // 並幫 li 加上 mouseover 事件 $('<ul class="playerControl"></ul>').html(_str).appendTo($slides.parent()).css('left', function(){ // 把 .playerControl 移到置中的位置 return (_width - $(this).width()) / 2; }).find('li').mouseover(function(){ var $this = $(this); $this.addClass('current').siblings('.current').removeClass('current'); // 移動位置到相對應的號碼 $slides.stop().animate({ left: _width * $this.index() * -1 }, _animateSpeed); return false; }).eq(0).mouseover(); }); |
其中 .playerControl 的在置中的 left 座標是透過簡單的計算:
檢視原始碼 JavaScript
1 | (#abgneBlock 的寬 - .playerControl 的寬) / 2 |
接著只要當滑鼠移到 .playerControl li 後就能進行廣告的切換顯示了。
若是要讓它能自動輪播展示的話,得再修改一下程式的部份:
檢視原始碼 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 49 50 51 52 53 54 55 56 57 58 59 | $(function(){ // 先取得必要的元素並用 jQuery 包裝 // 再來取得 $block 的高度及設定動畫時間 var $block = $('#abgneBlock'), $slides = $('ul.list', $block), _width = $block.width(), $li = $('li', $slides), _animateSpeed = 600, // 加入計時器, 輪播時間及控制開關 timer, _showSpeed = 3000, _stop = false; // 產生 li 選項 var _str = ''; for(var i=0, j=$li.length;i<j;i++){ // 每一個 li 都有自己的 className = playerControl_號碼 _str += '<li class="playerControl_' + (i+1) + '"></li>'; } // 產生 ul 並把 li 選項加到其中 var $playerControl = $('<ul class="playerControl"></ul>').html(_str).appendTo($slides.parent()).css('left', function(){ // 把 .playerControl 移到置中的位置 return (_width - $(this).width()) / 2; }); // 幫 li 加上 click 事件 var $playerControlLi = $playerControl.find('li').click(function(){ var $this = $(this); $this.addClass('current').siblings('.current').removeClass('current'); clearTimeout(timer); // 移動位置到相對應的號碼 $slides.stop().animate({ left: _width * $this.index() * -1 }, _animateSpeed, function(){ // 當廣告移動到正確位置後, 依判斷來啟動計時器 if(!_stop) timer = setTimeout(move, _showSpeed); }); return false; }).eq(0).click().end(); // 如果滑鼠移入 $block 時 $block.hover(function(){ // 關閉開關及計時器 _stop = true; clearTimeout(timer); }, function(){ // 如果滑鼠移出 $block 時 // 開啟開關及計時器 _stop = false; timer = setTimeout(move, _showSpeed); }); // 計時器使用 function move(){ var _index = $('.current').index(); $playerControlLi.eq((_index + 1) % $playerControlLi.length).click(); } }); |
除了自動輪播之外,筆者還把切換廣告的事件改成用 .click(),及把選單改成圓點的樣式:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 | #abgneBlock ul.playerControl li { float: left; width: 10px; height: 10px; cursor: pointer; margin: 0px 2px; background: url(images/cir_ctrl.png) no-repeat -10px 0; } #abgneBlock ul.playerControl li.current { background-position: 0 0; } |
至於是想要用點擊(click)或是當滑鼠移入(mouseover)到選單來判斷切換廣告的時機,這就由各位自行選擇囉!
很棒的範例
男丁大的blog真的有很多寶可以挖
非常好的一个网站。。强力支持
非常感謝!! 受用無窮~~~
很實用,獲益良多…
老師真的很強!!感謝您!
老師~
我套上這個效果後,當我點第2張圖時,它的右邊會多出來顯式出第三張的一角
如圖http://cycity.myweb.hinet.net/test.jpg
後來我發現~原來第四第、五第、六張都還沒下載完才會有這樣的結果
請問該怎麼解決這個問題~?
感謝
老師,我想請問一下,使用這個效果後,成果如下:
http://www.taidoc.com/2011/index.html
可是我要繼續在底下加入其他內容,卻發現會蓋到這個圖片上面,
不知道要怎麼解決,可以請您幫我看一下嗎?謝謝!!
(所有相關檔案都在這個路徑裡面)
在你要加的區塊中加入個 clear: both; 的 css 語法後試看看
老師~請問一下,這個範例可以跟您之前發表的「[jQ]用 jQuery 做畫廊 – 圖片展示之左右隱藏箭頭」這個範例結合在一起嗎?
謝謝!
是一定可以的, 但也許要做一點小修改...
老師您好
請問可以將圖片換成swf去改變嗎?
應該是可以的..try it!
老師可以耶!超酷的~~~