通常在筆者的範例中都是會個 div 當區塊來把要做效果的內容包在一起的,但其實並不是一定要在一起才行,就看各位的排版來決定。今天筆者就用個超簡單的圖片切換範例來示範給各位看看。
HTML 中當然是把區塊拆開來:
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 11 12 | <body> <div class="showbox"><img id="show-image" src="images/2012TaipeiCartShow_01.jpg" /></div> <p> 分隔用.... </p> <div class="abgne-block-20120106"> <a href="images/2012TaipeiCartShow_01.jpg"><img src="images/2012TaipeiCartShow_01.jpg" title="" /></a> <a href="images/2012TaipeiCartShow_02.jpg"><img src="images/2012TaipeiCartShow_02.jpg" title="" /></a> <a href="images/2012TaipeiCartShow_03.jpg"><img src="images/2012TaipeiCartShow_03.jpg" title="" /></a> <a href="images/2012TaipeiCartShow_07.jpg"><img src="images/2012TaipeiCartShow_07.jpg" title="" /></a> </div> </body> |
接著再用超簡單的 CSS 裝飾一下:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .showbox { width: 700px; height: 460px; border: 2px solid #1dd; vertical-align: middle; } .abgne-block-20120106 { margin-top: 10px; width: 680px; overflow: hidden; } .abgne-block-20120106 a { margin-right: 10px; } .abgne-block-20120106 a img { width: 140px; height: 92px; border: 2px solid #1dd; vertical-align: middle; } |
接著就是一點也不複雜的程式:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(function(){ // 用來顯示大圖片用 var $showImage = $('#show-image'); // 當滑鼠移到 .abgne-block-20120106 中的某一個超連結時 $('.abgne-block-20120106 a').mouseover(function(){ // 把 #show-image 的 src 改成被移到的超連結的位置 $showImage.attr('src', $(this).attr('href')); }).click(function(){ // 如果超連結被點擊時, 取消連結動作 return false; }); }); |
這邊的效果是當滑鼠移到超連結上面時,就會把 #show-image 的 src 改成被移到的超連結的位置囉。
什麼~想要讓它有淡出淡入的效果!這...因為只有一張大圖片來改變 src 而已,所以淡出淡入只能用障眼法的方式:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(function(){ // 用來顯示大圖片用 var $showImage = $('#show-image'); // 當滑鼠移到 .abgne-block-20120106 中的某一個超連結時 $('.abgne-block-20120106 a').mouseover(function(){ var $this = $(this), _src = $this.attr('href'); // 如果現在大圖跟目前要顯示的圖不是同一張時 if($showImage.attr('src') != _src){ $showImage.hide().attr('src', _src).stop(false, true).fadeTo(400, 1); } }).click(function(){ // 如果超連結被點擊時, 取消連結動作 return false; }); }); |
動作就是先以迅雷不及掩耳的速度把圖片隱藏起來並改變大圖的 src 位置後,再用淡入的方式來顯示它。雖然不能達到很漂亮的看到兩張圖片淡入淡出,但至少有有一點點效果啦。
不過這範例就讓超連結沒什麼功能性了。因為筆者範例中大圖跟小圖都是同一張,只是利用寬高的變化來產生效果,所以其實也能改成直接抓小圖來顯示大圖,而讓超連結保持它原有的功能:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 | $(function(){ // 用來顯示大圖片用 var $showImage = $('#show-image'); // 當滑鼠移到 .abgne-block-20120106 中的某一個超連結時 $('.abgne-block-20120106 a').mouseover(function(){ // 把 #show-image 的 src 改成被移到的超連結中的圖片的src $showImage.attr('src', $(this).find('img').attr('src')); }); }); |
雖然不一定要在一個區塊也能做出簡單的圖片切換效果,但若沒特別原因的話,還是建議包在同一區塊會比較方便一點。
正好需要這種功能,謝謝分享。
這個網站真是給新手一個很棒的學習環境阿!!!
請問如果要讓他像http://www.style-arena.jp/?langType=ch 網頁中的自動跑馬燈效果該如何作呢?
只是搭配使用計時器就可以了, 可以先參考像是左右水平廣告輪播-附加號碼鈕中的計時器部份。
男丁老師-自動輪播的滑鼠移入應該是要停在該張圖的大圖,但自動輪播卻沒有停止,不知問題出在哪?謝謝!!
抱歉沒考慮到, 檔案已更新了, 請再試看看!!
老師~檔案下載怪怪的...
應該是修改程式時剛好您要下載才有問題, 現在應該正常了~
老師~可以了!謝謝!
男丁老師,因為需求,所以大張的那張必須被點擊再單獨放大,像是使用ColorBox,Lightbox等效果,但是我若連結大圖,不管怎樣都只是跑第一張大圖,如何能讓它連結跟著大圖跑?
男丁老師,我修改你的檔案,可以跑Lightbox效果了,但只能從第一張大圖開始show,不能在第二張時直接第二張大圖show,請問我問題在哪裡,檔案下載位置http://www.arkdesign.co.jp/test/sample.rar
已修改並回信給您了
哇哇哇哇~太感動了,男丁老師你太偉大了,你把它做出來了,真是太謝謝了~~