筆者此次要教的範例是把上一次的「上下垂直選項式廣告輪播」改成左右水平的移動,同時還想要把按鈕移動到置中的位置。
這次的 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)到選單來判斷切換廣告的時機,這就由各位自行選擇囉!
但是swf會將圈圈的控制按鈕給遮住,但效果依然存在,
我使用z-index 也好像也無法將圈圈的按鈕移置最上層,
請問老師是要從jv下去做調整嗎?
試著把 swf 的 wmode 設為 transparent 後試試
老師您好
為什麼click 做更改為moseover,自動輪播的效果就會消失了?
抱歉..move() 中的 click 也要一併改成 mouseover
已經解決了!!
感謝您的這個範例 超好用的 使用上想請教如果要修改成跑到最後一張之後 再從最一張跑回來 而不是直接回到第一張 就像是 1->2->3->2->1->2->3 這樣子的撥放法如何作修改
謝謝~
可能得修改 move() 中的下張圖片的判斷, 當最後一張時就往前一張。
老師
看過你的Demo,非常驚豔,我有一個問題請教老師,如果改成向右移動要怎麼改?...
如果是要向右的話, 可能一開始就是要把 ul 的 left 移動到 -N 張的地方囉~
感謝老師
我已經解決...謝了
請問男老師(嗯?) 😀
我用了之後,在 ie8瀏覽器中,
圖片會播放時會有點 lag,頓頓的,
在 ie6, ie7, fx 都沒有這個問題。
套到自己寫的頁面中,感覺 lag 更嚴重了,請問有人遇到這種問題嗎??!!!
同頁面中,我也加了一支用這個改的↓下拉選單
http://www.open-lib.com/Lib/1184.jsp
結果好像衝到了,下拉選單在ie8變超慢的,
不好意思,不知道提供這些資訊,
夠不夠讓您有足夠訊息可以回答我的問題呢??!!!
謝謝你,你的網站讓我獲益良多!!! :DDD
我範例也在 IE8 中測試過, 並沒有特別 lag 的感覺, 可以的話就弄個簡單的範例來試看看
剛好要用到這個~謝謝大大的佛心啦~
想問問老師~
如果想每個小按鈕也有不同的icon, 那該怎樣弄?
我試過修改但不成功, 老師可以教教嗎?
按鈕的 className 是 .playerControl_1, .playerControl_2...
只要一一設定就可以了
感謝老師
弄到了
真的非常感謝~~