筆者此次要教的範例是把上一次的「上下垂直選項式廣告輪播」改成左右水平的移動,同時還想要把按鈕移動到置中的位置。
這次的 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)到選單來判斷切換廣告的時機,這就由各位自行選擇囉!
請問老師,我的頁面上兩個區塊都用這個範例(#abgneBlock & #abgneBlock2),可是因為兩塊的li數量不一樣,會有輪播不造順序亂跳的情形發生~
請問可以解決嗎?
程式稍微改寫一下下, 用 each() 的方式來處理整個區塊即可
謝謝老師還很完整的把細節都標註出來,
這樣要修改就更容易看懂了!!
也一直找這樣的特效好久了,但是都不太會修改
真的非常的謝謝唷!
只要畫面排的出來,接著的動畫效果就交給 jQuery 囉。
老師請問一下,
我套用了這個套件,怎麼會在第12張以後就錯亂了,
可以解救我一下嗎?
感謝。
http://www.tava555.org.tw/hope.html
把 #abgneBlock ul.list 的 width 變成 999999px;
不好意思老師我用了另外一個版本,
在第12張以後會出問題的改成這個網址:
http://www.tava555.org.tw/hope_test.html
老師請問一下如何把範例2改成淡入淡出呢?主要是要修改哪裡呢~謝謝
淡入淡出的範例可以參考:http://abgne.tw/jquery/apply-jquery/jquery-fade-in-out-image.html
老師
我想請問個很不專業問題orz
假如我想把圓點按鈕改放置到輪播圖片的右下方
那我要如何修改?
剛剛有試著把return (_width - $(this).width()) / 2;
這行拿掉就可以得到效果
不知道這樣改是否正確?
謝謝老師
這也是可以啦, 拿掉後你應該也能用 css 去設定它
老師您好,我想請問一下為什麼圖片看起來沒有那麼清楚(銳利),是因為我將尺寸改大的關係嗎?
如果單純用 html 或 css 來改變顯示大小的話,是有可能會造成這問題的。
我圖片尺寸也是一樣大小,不是用語法將它放大。請問該如何解決圖片不銳利的問題呢?謝謝老師。
也許這要交給對影像專門的 梅干 來處理了XD
男丁大大,原來你也是搞笑咖哦!
唔~這是術業有專攻!!
對不起,老師您可能誤會我意思了。我是指就純粹網站上顯示出圖片的感覺沒那麼清晰,但是檔案是清楚的。
如果你單純在一個 html 中加入一個 img 後也是覺得不清晰的話, 我想這可能就是因為網頁瀏覽器的關係吧!!!