不知道各位在 Yahoo 新聞 中看新聞消息時,是否有注意到網頁中有用來推薦最新消息用的兩格圖片效果:
每一個都會有 2-N 張圖片內容,除了可透過左右鈕來切換內容之外;右上角也會有小圓點來表示共有幾對內容,點擊小圓點也能立即的切換到該對圖片上。這樣的效果用來當商品展示或是廣告展示都蠻有效果的。所以筆者這次又要教各位如果做一個"山寨版"的囉。
首先就是要準備一下 HTML 的框架:
檢視原始碼 HTML
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 | <body> <div class="showBox"> <h2 class="title">最新產品推薦</h2> <div class="roll"></div> <div class="btn"> <a href="#" class="prev">Prev</a> <a href="#" class="next">Next</a> </div> <ul class="itemList"> <li> <a href="#" class="adContent"> <img src="images/s.gif" alt="" /> <h3>Script - S</h3> </a> <a href="#" class="adContent"> <img src="images/c.gif" alt="" /> <h3>Script - C</h3> </a> </li> <li> <a href="#" class="adContent"> <img src="images/r.gif" alt="" /> <h3>Script - R</h3> </a> <a href="#" class="adContent"> <img src="images/i.gif" alt="" /> <h3>Script - I</h3> </a> </li> <li> <a href="#" class="adContent"> <img src="images/p.gif" alt="" /> <h3>Script - P</h3> </a> <a href="#" class="adContent"> <img src="images/t.gif" alt="" /> <h3>Script - T</h3> </a> </li> <li> <a href="#" class="adContent"> <img src="images/js.gif" alt="" /> <h3>JavaScript</h3> </a> <a href="#" class="adContent"> <img src="images/jq.gif" alt="" /> <h3>jQuery</h3> </a> </li> </ul> <a href="#" class="more">More</a> </div> </body> |
其中 div.roll 是用來放置小圓點的;而 ul.itemList 中的每一個 li 都是用來顯示內容使用的,其中會再用 a 來切成左右各一塊。接著用 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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | .showBox { width: 290px; height: 220px; border: 1px solid black; position: relative; overflow: hidden; font-family: Arial; letter-spacing: 1px; } .showBox * { margin: 0; padding: 0; } .showBox a { color: blue; text-decoration: none; } .showBox h2.title { position: absolute; top: 10px; left: 5px; font-size: 16px; } .showBox .roll { position: absolute; top: 16px; right: 80px; } .showBox .roll a { float: left; width: 7px; height: 7px; margin-right: 3px; text-indent: -9999px; background: url(images/dot.gif) no-repeat 0 0; } .showBox .roll a.on { background-position: 0 -27px; } .showBox .btn { position: absolute; top: 10px; right: 5px; height: 20px; } .showBox .btn a { width: 31px; height: 24px; float: left; text-indent: -9999px; } .showBox .btn a.prev { background: url(images/btn.gif) no-repeat 0 -42px; } .showBox .btn a.next { background: url(images/btn.gif) no-repeat 0 0; } .showBox a.more { position: absolute; bottom: 10px; right: 5px; padding-left: 7px; font-size: 12px; background: url(images/more.gif) no-repeat -1px 5px; } .showBox ul.itemList, .showBox ul.itemList li { list-style: none; } .showBox ul.itemList { position: absolute; top: 40px; white-space: nowrap; } .showBox ul.itemList li { display: inline; } .showBox ul.itemList li .adContent { display: inline-block; width: 135px; margin: 0 5px; } .showBox ul.itemList li .adContent h3 { text-align: center; font-weight: normal; font-size: 12px; } .showBox ul.itemList li .adContent img { border: 1px solid #ccc; padding: 5px; } |
不要看到 CSS 落落長就覺得它很難,其這邊比較麻煩的只是如何讓 ul.itemList 水平排列時不換行而已。若順利的話就能看到相似度達 9 成的畫面了:
嘿~除了不能換上下組內容之外,還缺少了表示幾對的小圓點。這些我們就用 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 46 47 48 49 50 | $(function(){ $('.showBox').each(function(){ // 先取得必要的元素並用 jQuery 包裝 // 並設定移動速度 var $showBox = $(this), $itemList = $showBox.find('ul.itemList'), $items = $itemList.find('li'), $adContent = $items.find('.adContent'), _margin = parseInt($adContent.css('margin-left')) || 0, speed = 400; // 判斷是不是 IE6 或 IE7 var isIE67 = $.browser.msie && $.browser.version < 8; // 產生小圓點 var rollStr = ''; $items.each(function(i, ele){ rollStr += '<a href="#">'+i+'</a>\r\n'; }); // 加入小圓點並加上 click 事件 $showBox.find('.roll').html(rollStr).find('a').click(function(){ move($(this).index()); }).eq(0).addClass('on'); // 當點擊左右鈕時 $showBox.find('.prev, .next').click(function(){ // 找出目前是顯示那一組 var no = $showBox.find('.roll a.on').index(); // 判斷接下來要移往那一組 no = ($(this).attr('class').indexOf('prev')>-1 ? (no - 1 + $items.length) : (no + 1)) % $items.length; // 進行移動 move(no); return false; }); // 控制移動的函式 function move(no){ $itemList.stop().animate({ left: $items.eq(no).position().left * -1 + (isIE67 ? _margin : 0) }, speed); $showBox.find('.roll a').eq(no).addClass('on').siblings().removeClass('on'); } }); $('a').focus(function(){ this.blur(); }); }); |
將將~這樣一個仿 Yahoo 新聞 的切換式兩格圖片廣告效果就完成囉!至於如何讓它能循環切換及自動輪播就留給各位當做功課了。
老師, 範例的網頁不會動了,是否跟jQuery的版本有關?