有同學問到能不能讓圖片的切換效果是溶入的方式?這樣的效果好像在 Flash 上是比較常見的,若真的要用 JavaScript 來做到溶入的話,可是會殺死設計師很多腦細胞的。所以,筆者就取巧的使用淡入淡出的方式來模擬它。
筆者這邊只用很簡單的 HTML 來展示圖片:
檢視原始碼 HTML
1 2 3 4 5 6 7 | <body> <div id="abgne_fade_pic"> <a href="http://abgne.tw" class="ad"><img src="g01.jpg" /></a> <a href="#" class="ad"><img src="g02.jpg" /></a> <a href="#" class="ad"><img src="g03.jpg" /></a> </div> </body> |
接著透過 CSS 把超連結的 position 設成 absolute 來讓圖片能疊在一起:
檢視原始碼 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 | a img { border: none; } #abgne_fade_pic { position: relative; width: 500px; height: 500px; border: 1px solid #ccc; } #abgne_fade_pic a.ad { position: absolute; /* 讓圖片疊在一起 */ } #abgne_fade_pic .control { position: absolute; right: 10px; bottom: 10px; } #abgne_fade_pic .control a { display: inline-block; padding: 3px; margin: 0 3px; width: 16px; color: #fff; background: #000; text-align: center; font-size: 16px; text-decoration: none; } #abgne_fade_pic .control a.on { font-weight: bold; color: #f00; } |
再來筆者會用程式去產生出相對應數量的按鈕:
檢視原始碼 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 | $(function(){ var $block = $('#abgne_fade_pic'), $ad = $block.find('.ad'), showIndex = 0, // 預設要先顯示那一張 fadeOutSpeed = 2000, // 淡出的速度 fadeInSpeed = 3000, // 淡入的速度 defaultZ = 10; // 預設的 z-index // 先把其它圖片的變成透明 $ad.css({ opacity: 0, zIndex: defaultZ - 1 }).eq(showIndex).css({ opacity: 1, zIndex: defaultZ }); // 組出右下的按鈕 var str = ''; for(var i=0;i<$ad.length;i++){ str += '<a href="#">' + (i + 1) + '</a>'; } var $controlA = $('#abgne_fade_pic').append($('<div class="control">' + str + '</div>').css('zIndex', defaultZ + 1)).find('.control a'); // 當按鈕被點選時 // 若要變成滑鼠滑入來切換時, 可以把 click 換成 mouseover $controlA.click(function(){ // 取得目前點擊的號碼 showIndex = $(this).text() * 1 - 1; // 顯示相對應的區域並把其它區域變成透明 $ad.eq(showIndex).stop().fadeTo(fadeInSpeed, 1).css('zIndex', defaultZ).siblings('a').stop().fadeTo(fadeOutSpeed, 0).css('zIndex', defaultZ - 1); // 讓 a 加上 .on $(this).addClass('on').siblings().removeClass('on'); return false; }).focus(function(){ $(this).blur(); }).eq(showIndex).addClass('on'); }); |
這樣當使用者去點擊按鈕時就會把目前的圖片做淡出的動作,然後同時把相對應的圖片做淡入,因為圖片都疊一起,所以就會有影像重疊的錯覺出來:
最後如果需要讓它能自動輪播的話,就得再加上 setTimeout() 計時器來配合:
檢視原始碼 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 60 61 62 63 64 65 66 67 | $(function(){ var $block = $('#abgne_fade_pic'), $ad = $block.find('.ad'), showIndex = 0, // 預設要先顯示那一張 fadeOutSpeed = 2000, // 淡出的速度 fadeInSpeed = 3000, // 淡入的速度 defaultZ = 10, // 預設的 z-index isHover = false, timer, speed = 2000; // 計時器及輪播切換的速度 // 先把其它圖片的變成透明 $ad.css({ opacity: 0, zIndex: defaultZ - 1 }).eq(showIndex).css({ opacity: 1, zIndex: defaultZ }); // 組出右下的按鈕 var str = ''; for(var i=0;i<$ad.length;i++){ str += '<a href="#">' + (i + 1) + '</a>'; } var $controlA = $('#abgne_fade_pic').append($('<div class="control">' + str + '</div>').css('zIndex', defaultZ + 1)).find('.control a'); // 當按鈕被點選時 // 若要變成滑鼠滑入來切換時, 可以把 click 換成 mouseover $controlA.click(function(){ // 取得目前點擊的號碼 showIndex = $(this).text() * 1 - 1; // 顯示相對應的區域並把其它區域變成透明 $ad.eq(showIndex).stop().fadeTo(fadeInSpeed, 1, function(){ if(!isHover){ // 啟動計時器 timer = setTimeout(autoClick, speed + fadeInSpeed); } }).css('zIndex', defaultZ).siblings('a').stop().fadeTo(fadeOutSpeed, 0).css('zIndex', defaultZ - 1); // 讓 a 加上 .on $(this).addClass('on').siblings().removeClass('on'); return false; }).focus(function(){ $(this).blur(); }).eq(showIndex).addClass('on'); $ad.hover(function(){ isHover = true; // 停止計時器 clearTimeout(timer); }, function(){ isHover = false; // 啟動計時器 timer = setTimeout(autoClick, speed); }) // 自動點擊下一個 function autoClick(){ if(isHover) return; showIndex = (showIndex + 1) % $controlA.length; $controlA.eq(showIndex).click(); } // 啟動計時器 timer = setTimeout(autoClick, speed); }); |
你好,我有個問題,想要結合淡入淡出以及翻轉式選單
希望平時是淡入淡出,滑過時會有翻轉的特效,而這樣的圖片會有很多個,都要做這樣的動作
這部分我修改的是將div改成ul跟li,將您的兩個程式套在一起時,是可以運作的,但是他只會輪播一次,並不會循環,就停掉了,想請問是因為修改成li導致的嗎?有什麼解決方法呢? 謝謝
以下是我的html
CSS
#abgne_fade_pic li{
float:left;
}
#abgne_fade_pic li a{
display:block;
height:500px;
line-height:16px;
text-indent:-9999px;
}
#abgne_fade_pic a#v1a{
background:url(g01.jpg);
width:500px;
}
#abgne_fade_pic a#v1b{
background:url(g02.jpg);
width:500px;
}
抱歉不知道爲什麼html沒有顯示出來
謝謝
這要看你的網頁才知道問題在那!!
已將檔案寄至老師的信箱,另外想請問討論區目前是否開放?
謝謝
已修改並回覆給你了。討論區暫時是不會開放!!
你好
我想要請問當滑鼠 click時可以不要自動輪撥
滑鼠離開時在自動輪撥
我把全部的範例都更新了, 你再試看看!
男丁大大!!
請問一下:
如何把數字移除掉呢?! 不要顯示數字 其他功能都正常這樣可以嗎?
感謝!!
在 CSS 那邊多新增一句隱藏語法就可以囉~
男丁老師
我用ie7、ie8、chrome瀏覽器,
發現在頁碼按鈕上按來按去後,時間會亂跳,變得沒有規律,時慢時快
例如:目前已撥到號碼 " 3 ",這時我按到 " 1 " , 圖片順利輪播至第一張沒錯,
但卻很快的就撥到"2",這速度跟我們設得秒速不太一樣,
再請男丁老師看一下喔。
感謝。
這問題應該是在輪播速度比淡入速度還慢時才會發生, 現在修改後應該 ok 哩~
其实这插件还是有个漏洞的,当你把点击页码按钮事件换成你注释的mouseovers事件时,动画停止了。出现了这个bug
會有怎樣的 bug?你試著是第幾個範例?
我直接用的是上面写的代码,没有用案例里面的
現在再試也是一樣嗎?程式代碼有修改過了~
您好,我也遇到同樣問題,剛下載您目前的範例0023_2,修改為mouseover, 就無法自動播放了, 只能靠mouseover去切換
當你改成 mouseover 後, 在 autoClick 函式中的是否有一起改呢?
也要改成
老師您好我用你的方法練習...圖片不會重疊..他垂直排下來的
position: absolute我有設這個請問是為什麼阿...
這還要看你其它 css 及 html 設定哩~
如果想要增加到4~5張圖片 要怎麼改呢? 謝謝
不就是依我範例中的 div 中加入超鏈結+圖片就可以了嗎?!
如果想要第一張圖就淡入怎麼做呢? 由黑底淡入
那你可能要把程式中關於先把其它圖片的變成透明的後面那段拿掉