如果你是看到預覽圖(感謝梅干熱情提供)而覺得裡面會有好康的話,建議可以按下 Alt + ← 來回到上一頁:如果你現在因為標題看不懂而感到莫名其妙的話,請不要覺得是自己的問題,因為筆者已經想不出範例名稱了XD!所以請忽略標題直接看下去。
首先準備個簡單的 HTML 內容:
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 11 | <body> <div class="abgne_product_arrow_silder"> <ul> <li class="selected"><img src="m01.jpg" /></li> <li><img src="m02.jpg" /></li> <li><img src="m03.jpg" /></li> <li><img src="m04.jpg" /></li> <li><img src="m05.jpg" /></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 | .abgne_product_arrow_silder { width: 450px; height: 250px; position: relative; border: 1px solid #ccc; overflow: hidden; } .abgne_product_arrow_silder ul, .abgne_product_arrow_silder ul li { margin: 0; padding: 0; list-style: none; } .abgne_product_arrow_silder ul li { position: absolute; z-index: 1; } .abgne_product_arrow_silder ul li.selected { z-index: 99; } |
因為把 li 的 position 設成 absolute 後,所以全部的 li 都會疊在一起,且有 .selected 的 li 階層會最高。不過因為 li 都疊在一起,所以我們得提供功能鈕來切換其它圖片才行,所以筆者會利用 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 33 34 35 36 37 38 39 40 41 42 43 44 45 | $(function(){ // 先取得必要的元素並用 jQuery 包裝 // 並設定箭頭圖片的寬度及其透明度 // 接著產生兩個放置箭頭用的空白超連結 var $silder = $('.abgne_product_arrow_silder'), $li = $('ul li', $silder), arrowWidth = 48 * -1, arrowOpacity = .3, $arrows = $('<a href="#" class="prev"></a><a href="#" class="next"></a>').css('opacity', arrowOpacity), $prev = $arrows.filter('.prev'), $next = $arrows.filter('.next'), fadeSpeed = 400; // 把箭頭超連結加到 $silder 中 // 並幫 $silder 加上 hover 事件 $silder.append($arrows).hover(function(){ var no = $li.filter('.selected').index(); arrowAction(no > 0 ? 0 : arrowWidth, no < $li.length - 1 ? 0 : arrowWidth); }, function(){ arrowAction(arrowWidth, arrowWidth); }); // 當滑鼠點擊左右箭頭時 $arrows.click(function(){ // 先取出目前顯示的 li 及其排行 var $selected = $li.filter('.selected'), no = $selected.index(); // 判斷是要上一張還是下一張 no = this.className=='prev' ? no - 1 : no + 1; $li.eq(no).addClass('selected').siblings().removeClass('selected'); arrowAction(no > 0 ? 0 : arrowWidth, no < $li.length - 1 ? 0 : arrowWidth); return false; }).focus(function(){ this.blur(); }); // 控制左右箭頭顯示或隱藏 function arrowAction(l, r){ $prev.stop().css({ left: l }); $next.stop().css({ right: r }); } }); |
其中的 a.prev 及 a.next 都是用來控制的鈕,為了讓它能看起來像樣一點,所以得額外再替它們倆增加 CSS:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .prev { background:url(prev.gif) no-repeat; width: 38px; height: 48px; position: absolute; left: -48px; /* 先藏在左邊 */ top: 101px; /* (區塊高-圖片高) / 2 */ z-index: 100; } .next { background:url(next.gif) no-repeat; width: 38px; height: 48px; position: absolute; right: -48px; /* 先藏在右邊 */ top: 101px; /* (區塊高-圖片高) / 2 */ z-index:100; } |
當瀏覽者把滑鼠移到 .abgne_product_arrow_silder 區塊上時,程式會很 smart 的出現上下鈕;同時當點選上下鈕時會切換該顯示的 li 內容。
我想一定有人會覺得這樣切換圖片很單調,所以筆者幫上下鈕的動畫的出場方式,而圖片的切換就用淡入淡出(Fade)的方式:
檢視原始碼 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 | $(function(){ // 先取得必要的元素並用 jQuery 包裝 // 並設定箭頭圖片的寬度及其透明度 // 接著產生兩個放置箭頭用的空白超連結 var $silder = $('.abgne_product_arrow_silder'), $li = $('ul li', $silder).not(':first').css('opacity', 0).end(), arrowWidth = 48 * -1, arrowOpacity = .3, $arrows = $('<a href="#" class="prev"></a><a href="#" class="next"></a>').css('opacity', arrowOpacity), $prev = $arrows.filter('.prev'), $next = $arrows.filter('.next'), fadeSpeed = 400; // 把箭頭超連結加到 $silder 中 // 並幫 $silder 加上 hover 事件 $silder.append($arrows).hover(function(){ var no = $li.filter('.selected').index(); arrowAction(no > 0 ? 0 : arrowWidth, no < $li.length - 1 ? 0 : arrowWidth); }, function(){ arrowAction(arrowWidth, arrowWidth); }); // 當滑鼠點擊左右箭頭時 $arrows.click(function(){ // 先取出目前顯示的 li 及其排行 var $selected = $li.filter('.selected'), no = $selected.index(); // 判斷是要上一張還是下一張 no = this.className=='prev' ? no - 1 : no + 1; $li.eq(no).stop().fadeTo(fadeSpeed + 100, 1, function(){ arrowAction(no > 0 ? 0 : arrowWidth, no < $li.length - 1 ? 0 : arrowWidth); }).addClass('selected').siblings().fadeTo(fadeSpeed, 0).removeClass('selected'); return false; }).focus(function(){ this.blur(); }); // 控制左右箭頭顯示或隱藏 function arrowAction(l, r){ $prev.stop().animate({ left: l }); $next.stop().animate({ right: r }); } }); |
若還需要讓圖片能有超連結功能的話,那就是在 li 中使用超連結來把圖片包起來囉:
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 11 | <body> <div class="abgne_product_arrow_silder"> <ul> <li class="selected"><a href="http://abgne.tw"><img src="images/a.jpg" /></a></li> <li><a href="http://www.google.com"><img src="images/b.jpg" /></a></li> <li><a href="#"><img src="images/g.jpg" /></a></li> <li><a href="#"><img src="images/n.jpg" /></a></li> <li><a href="#"><img src="images/e.jpg" /></a></li> </ul> </div> </body> |
您好
請問如果要改成讓圖片自動輪播
要怎麼修改呢?
謝謝!
可以利用 setTimeout() 等的計時器來達到自動播放的效果
參考看看:左右不間斷的商品展示輪播
感謝
男丁兄分享
相當實用的效果
獲益良多
感謝分享好東西~先來研究研究
您好
請問要如何可以在同個網站用兩個以上的畫廊?
我今天測試,發現只能控制一個畫廊且其他畫廊沒反應
感謝您的好東西!!
程式的部份要改用 .each() 的方式來寫才行。
或者土法煉鋼的方式就是程式 copy 兩段..不過變數那些都要改或者都各自包在自己的 scope 中
讚喔~感謝大大分享啦
正再找這個呢
這個功能好酷喔~!!!
有可能跟另一篇的滑動式相簿做結合嗎???
可以啊, 我記得有看過有網友合起來過
男丁大大,我嚐試要把此功能跟 滑出式說明結合 可是卻一直失敗
會出現只有箭頭功能 按下時才跑 滑出說明 請問這種情況要如何修改呢?
我猜想是你的 html 及 css 排版的問題, 這也是要看到檔案才知道要怎樣修改。但兩者是一定可以結合的!
老師您好:
我嘗試用了上面說的加上"左右不間斷的商品展示輪播"裡的自動播放,
可是會被跳出來的隱藏箭頭阻擋播放,改了幾個可能的地方還是一樣,
不知道老師有沒有什麼方法呢?麻煩您了謝謝!!
PS.老師的網站真的很詳細很實用!學到很多!很感謝阿~~
你要的效果是不間斷的自動輪播嗎?
是的,希望是滑鼠移到箭頭才停止自動播放。
正常就是寫一個用來控制切換的 function, 接著利用計時器來定時執行該 function。
有寫一個範例,不過...放在進階範例中 XD
好像只有一兩個li的時候有問題!
你是試那一個範例?有什麼問題?