因為小神童我才知道在台灣有個讓有志成為作家能人大展文筆的平台 - POPO 原創市集。不過我會進去網站逛逛重點通常都是擺在看看一些網頁效果而已,像是今天要分享的
它把控制廣告切換的控制項跟要顯示的標題放一起,整個效果還蠻新鮮有趣的。POPO 原創市集 是搭配 jQuery Cycle Plugin 來使用的,雖然說要仿它的效果,但若用一樣的套件就感覺是真的"仿"了。所以筆者一樣是教各位如果在不使用外掛的情況下來實做囉!
一樣是使用基本的 ul li 當廣告清單囉(圖片一樣是從梅干那邊借來的):
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 | <body> <div id="abgne-block-20111227"> <ul class="lists"> <li><a href="#"><img alt="三星~SunsangNX200" src="images/sunsangNX200_01.jpg" /></a></li> <li><a href="#"><img alt="3吋的AMOLED液晶顯示螢幕" src="images/sunsangNX200_06.jpg" /></a></li> <li><a href="#"><img alt="梅干看到這個彎曲的橋墩,感覺相當的有律動感" src="images/sunsangNX200_08_0s.jpg" /></a></li> <li><a href="#"><img alt="仿義式建築,還有假天空" src="images/sunsangNX200_09s.jpg" /></a></li> <li><a href="#"><img alt="哈哈~美味的鬆餅加梅干最愛的草莓與奇異果" src="images/sunsangNX200_21s.jpg" /></a></li> <li><a href="#"><img alt="只要有ShowGirl之處,周遭就圍著滿滿的人" src="images/sunsangNX200_30s.jpg" /></a></li> <li><a href="#"><img alt="什麼!!看了圖片就想去下訂買車啊!!" src="images/SAM_7833.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 46 | #abgne-block-20111227 { width: 600px; height: 400px; position: relative; overflow: hidden; } #abgne-block-20111227 ul, #abgne-block-20111227 ul li { margin: 0; padding: 0; list-style: none; } #abgne-block-20111227 .lists { height: 100%; position: relative; overflow: hidden; } #abgne-block-20111227 .lists img { width: 100%; height: 100%; border: none; } #abgne-block-20111227 .controls { width: 100%; height: 35px; position: absolute; bottom: 0; font-size: 13px; z-index: 2; } #abgne-block-20111227 .controls li { float: left; } #abgne-block-20111227 .controls li a { display: block; width: 44px; /* 寬度會影響未放大前顯示的字數 */ height: 35px; line-height: 35px; margin-right: 1px; text-align: center; background: #000; color: #fff; text-decoration: none; } #abgne-block-20111227 .controls li.selected a { background: #87bf00; } |
.controls 是用來控制切換用的,這部份我們一樣是用 jQuery 依 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 60 | $(function(){ // 先取得相關區塊及塊的高 // 並取得 li var $block = $('#abgne-block-20111227'), _blockHeight = $block.height(), $list = $block.find('li'), _liOpacity = 0.8, _animateSpeed = 400, _selectedIndex = 0; // 產生下方控制用的 ul li var $controls = $('<ul class="controls"></ul>'), _li = ''; $list.each(function(i){ var $this = $(this).css({ position: 'absolute', top: i==_selectedIndex ? 0 : _blockHeight, zIndex: i==_selectedIndex ? 1 : 0, display: i==_selectedIndex ? 'block' : 'none' }), $a = $this.find('a'); _li += '<li><a href="'+$a.attr('href')+'">'+$a.find('img').attr('alt')+'</a></li>'; }); // 幫 li 加上透明度 // 並計算 li 基本寬度及最大寬度 var $li = $controls.html(_li).appendTo($block).find('li').css('opacity', _liOpacity), _liWidth = $li.width(), _selectedWidth = $block.width() - ($li.length - 1) * _liWidth - 1; // 當滑鼠移到 li 上時 $li.mouseover(function(){ var $this = $(this), _index = $this.index(); // 如果現在移上去的跟已顯示是的同一個就跳過 if(_selectedIndex == _index) return; // 進行動畫切換 $list.eq(_index).stop(true, true).css({ top: _blockHeight, zIndex: 1, display: 'block' }).animate({ top: 0 }, _animateSpeed).end().eq(_selectedIndex).stop(true, true).animate({ top: -_blockHeight }, _animateSpeed, function(){ $(this).hide(); }); // 把滑鼠移上去的 li 寬度變成最大寬度 // 並將上一個最大寬度的 li 寬度變成基本寬度 //$this.addClass('selected').find('a').width(_selectedWidth).end().siblings('.selected').removeClass('selected').find('a').width(_liWidth-1); $this.addClass('selected').find('a').width(_selectedWidth); $li.eq(_selectedIndex).removeClass('selected').find('a').width(_liWidth-1); _selectedIndex = _index; }).eq(_selectedIndex).addClass('selected').find('a').width(_selectedWidth); }); |
這邊大部份的一些寬度等數值都是用程式計算出來的,所以就算在原本的 ul 中新增 li 也可以不改程式正常運作滴~
這範例比較特別的是它的切換移動方式,不管移到那張都是會接在前一張一起移動的唷!如果想再加上自動輪播的功能時,再補上一段計時器的控制就可以了:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // 用 speed 表示切換輪播的速度 var timer, speed = 1000; // 用來自動輪播使用 function auto(){ var _index = (_selectedIndex + 1) % $li.length; $li.eq(_index).mouseover(); timer = setTimeout(auto, speed + _animateSpeed); } $block.hover(function(){ // 當滑鼠移入時, 停止計時器 clearTimeout(timer); }, function(){ // 當滑鼠移出時, 啟動計時器 timer = setTimeout(auto, speed); }); // 啟動計時器 timer = setTimeout(auto, speed); |
南丁大
您的 網站好像出了問題
php出現錯誤
抱歉, 因為在修改程式所以造成大家的困擾。現在應該ok了~
恢復正常了!謝謝您! 您的教學很棒 很實用!
男丁大您好
廣告上設連結開新視窗的部分好像只有點圖片連結的時候正常
點下方alt抓出來的文字好像無法開出新視窗耶
你是要新視窗嗎?那就是把
改成
感謝男丁大大^^
請問男丁大大,這有辦法改成淡入淡出變換嗎?
要變成淡入淡出就要改 css 及 js。或者可以先參考 http://abgne.tw/jquery/apply-jquery/jquery-fade-in-out-image.html
OK,謝謝你,我再試試看:)
Hello 男丁大
時常來你部落格學習,受益很多
最近我們公司有個案子
想跟男丁大合作
請問該如何與你聯繫
謝謝^^
可以直接透過 mail 來聯絡, 網址@gmail.com
abgne@還是abgne.tw@
連同.tw
請問IE看得到嗎 我朋友說都看不到><
要如何解決呢?
難道你朋友就是還在用 IE6 的那一小搓人嗎?
不然應該 6 以上的都能正常才對, 就算畫面有點怪, 但也不至於看不到!!
報告! 想請問 男丁大!!!
我用 IE10 在本機端看的時候就很正常,上傳了網站之後就 看不到了!
這樣是正常的嗎?
當然不正常啊XD
top: i==_selectedIndex ? 0 : _blockHeightkeyi 请问这个语法是什么意思呢?特别是那个问号是什么意思,麻烦了
這是三元運算子, 如果 i==_selectedIndex 成立則會回傳 ? 後面的值, 否則回傳 : 後的值
也就是i==_selectedIndex成立则值等于0,不成立值等于 _blockHeightkeyi是吗?
是的, 沒錯~
非常感谢~
var _index = (_selectedIndex + 1) % $li.length;
请问下这句话中的%是什么意思,我看你的定时器都是有这个发放来做的,一直没明白是什么意思。麻烦了。
這是算出下一個要顯示的廣告的索引, 當已經是最後一個廣告時, 就再從第一張開始
您好!男丁大
請問可以將control部份分開向下一點
讓他不要遮到圖嗎?
謝謝~
你可以先透過修改 css 的 #abgne-block-20111227 .controls 來試看看~
男丁大您好!
請問我可以修改您的程式後套用在我們公司的網站上嗎?
我會在程式碼中註明是改編自您的程式,這樣OK嗎?
謝謝
可以~