筆者此次要教的範例是把上一次的「上下垂直選項式廣告輪播」改成左右水平的移動,同時還想要把按鈕移動到置中的位置。
這次的 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)到選單來判斷切換廣告的時機,這就由各位自行選擇囉!
請問老師:http://www.shopbop.com/ci/3/lb/brand/haute/haute-hippie.html#page0
這個首頁的質感好棒喔~除了滑動之外還有左右兩側箭頭,不知道可以怎麼修改成這樣呢~感謝您的指導
冒昧請教一下,左右兩側箭頭 VS 下方圓形控點的圖片切換方式你覺得有甚麼差別?
兩者圖片切換方式都一樣,泡製下方圓形控點的程式碼到左右兩側箭頭的 click 事件上後稍做修改就 OK 了。所以自己手動修改並不難啊!不懂你的問題在哪,是完全不懂 jQuery 嗎?
$slides.stop().animate({
left: _width * $this.index() * -1
}, _animateSpeed, ..........
這一段稍做修改,改成對應箭頭滑鼠click事件。
例如你在 img 內加個 alt 屬性,標計這是第 N 幾張圖,抓出這個alt屬性就知道你目前是第幾張圖,上下張是哪一幅圖自然就知道了,應該不難吧。但是我懶的手動去改,你自己改改看吧。
抱歉,忘記補充說明,我跟男丁大大沒任何關係,越廚代庖回答。
所果還不行,不知道怎麼動手,但是想拿來做商業應用,可看看右上方的價碼,幫男丁大大製造一點收入。花時間想程式碼、排版貼出來這都要花很多時間。男丁大大這個價碼我覺得真的很平價。
我是覺得男丁大大肯把程式碼分享出來是佛心來也,但是後續應用主要看個人領悟。你只要懂一點 jQuery 基本應用,應該改的好。
非常佩服,对Jquery的理解能如此透彻,你的这个轮播切换是我见过最简单,而且解释,性能各方面都非常完美的,代码也非常简介,非常厉害
過獎了~我只是用較快速的方式來達成效果, 說不上什麼完美。
我移植你的代码后出现了一个问题,在FF,谷歌下面轮播广告出现了问题,animate的计算居然出错了,在IE下全部正常,真让我很崩溃,连问题所在都没办法找到。请教了
你直接用我的範例在 chrome 中也會有問題嗎?若不會的話, 那可能要看到你的 code 才知道問題在那~
没有用你的范例没问题,我昨天用完你的代码都没问题,今天我加了一段自己的JS到页面,不知道会不会跟你的有冲突,还是CSS出了什么问题,我拿昨天备份的出来也没问题,现在就是不知道是什么情况
我是說, 直接瀏覽我的範例是否會有問題?
另外, 麻煩你看一下 css 及 js 的載入順序, 建議先載入 css 後再載 js(jQuery)
果真如此,要先载入CSS才行,不然谷歌会有问题
是 jQuery 在某次改版後, 它就建議要先載 css 再載 jQuery, 否則就像你一樣會無法正確取得 css 設定的問題。
男兄你的这个插件虽然好用,但是我发有个效果比这个还好一点,就是当广告到最后一副的时候返回第一幅广告的过程是倒退的形式,但是有一种是直接就到第一幅,我尝试修改你的代码想做到这个效果还是失败了,效果跟这个网站一样http://www.huawei.com/cn/,不知道能否提供修改方法,谢谢
huawei 這應該是最後一張時, 下一次又繼續第一張, 這樣的效果是要讓每一張圖座標都是絕對的才行, 您可以先參考這一篇: 水平滑動式頁籤
想要請教老師如果這種滑動banner想要做到像此網址:
https://www.tsohost.com/
的banner一樣,可以依照不同瀏覽器螢幕的大小自動調整其banner寬度可以怎麼設定呢?
你可以搜尋一下 "responsive web design"
老師你好:我是今天剛加入的會員,謝謝分享這麼棒且完整的語法,真的非常實用!
男丁大大你好,我有個問題和樓上的owen大大一樣的問題,指是我只想讓圖片到最後一張的時候,繼續播下去從第一張開始,而不是倒帶回到第一張,我有試過都不成功,請問要修改哪裡呢?
老師您是有提到別的範例,但是是有加頁簽的,所以我還是想用這個!:P
其實有很多不間斷的範例咧, 例如 左右不間斷的商品展示輪播
謝謝老師,這個還有加了邊框,看起來更有設計感,而且還更簡單用,只要看背景圖整個感覺就變了,謝謝你!
是改背景圖啦!打錯字感覺都不對了!:p
男丁老師您好
這個應用範例,在Google Chrome瀏覽器中,圖片左邊會殘留大約1px的上一個圖片
不知道要如何改進這個小小的Bug呢?
老師您好:
如果我要最後一張圖顯示完後,直接顯示第一張,不要出現從最後一張回到第一張的效果!這個要做麼修改呢!感謝!
請問我幫別人架網站,想要呈現您的效果,
可以用您的特效的原始碼嗎?謝謝
男丁老師~
假如我想把寬度改成100%~
有什麼應該注意的
可以先試試, 有差的應該就是寬度是否能正常取得