筆者此次要教的範例是把上一次的「上下垂直選項式廣告輪播」改成左右水平的移動,同時還想要把按鈕移動到置中的位置。
這次的 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)到選單來判斷切換廣告的時機,這就由各位自行選擇囉!
您好:
我想請問一下我把它的css修改為w224h332 px,其他參數皆不變。
也放了相同尺寸的五張圖片,輪播器上面放了一個iphone的png檔,想要展示手機軟體。
第一二張圖片輪播時,都可以和iphone的螢幕對應到,但是跑到第三張圖片的之後,圖片就會自己往左邊一點,左邊一點點會被上一層iphone的框蓋到,以致右邊會多出空白。(會自己再往左邊一點點位移)
是直接用我範例去改後直接用 iPhone 看就會這樣嗎?
有個問題想請教南丁格爾大大,我試著跟著你提供的語法來製作廣告,但是playercontrol卻沒有出來,請問這種狀況要如何解決,謝謝!
我需要看到你的網頁才知道問題在那邊~
感謝男丁老師~ 看了您回答網友的問題~ 終於頓悟了^^
Q.第一段javaSript $slides.stop().animate,為何在animate前需要增加stop()我把STOP()刪除好像也沒變
A.動畫會累加, 所以當被重覆觸發時, 希望先停掉未完成的, 直接執行新的動畫
幫助好大喔!! 謝謝
你好 我想請問 我該如何將整個輪播廣告 置於網頁的水平中央呢????因為是初學者還不太懂 能否清楚告訴我該怎麼做呢?拜託了謝謝
一般就是將區塊的 margin 設為 auto 0;
但還是要看你的 HTML 跟 CSS 才能確定是否適用~
老師你好,我把CSS和javascript改成外掛式的,但小圓點卻消失了?!其餘功能都還在?請問是我操作上有問題嗎?
http://www.ishome.com.tw/740/a/blogs/static/17521
這是被盜用還是有授權的丫XD
想請問一下 試著套用老師的原始碼 配著自己的圖 發現按鈕邊邊部噴會跑出白色方框
想問一下要如何解決? 謝謝!
您好,無意間由梅問題逛到您的網站, 想請教您這個左右輪播放的效果可以再加上圖片中有title跟著一起顯示嗎? 我嘗試用梅問題方式加入你的script就....哈哈哈,整個不行動了.
老師您好!!
想請教,要如何將事件的方格改放到網路上,因為小弟是新手所以不太會敍述
就是下面這個URL 要怎麼變 SRC可以用
background: url(images/rect_ctrl.png)
是直接變成
background: src(images/rect_ctrl.png)
可是還是無法使用,請老師指導!!
老師你好:)想問你一下這篇裡面的JQ語法好像有問題耶......因為套用上去不會輪播 只有一張圖片而已 按鈕也出不來......想問老師該怎麼辦?