最近剛好逛到 MSN 台灣的網站,看到它首頁的廣告展示效果蠻簡單直覺的
它預設會自動輪播切換下一張圖片,也會顯示該圖片的描述文字及目前顯示的筆數,而下方的按鈕也能切換及控制是否輪播的功能哩!所以筆者手癢就把它偷來跟大家分享囉~
先準備個簡單的 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 | <body> <div id="abgne-block-20120509"> <ul class="items"> <li> <a href="#"> <img src="images/DSC_0342.JPG" alt="每一個都讓人流口水的義式麵包" /> </a> </li> <li> <a href="#"> <img src="images/DSC_0385.JPG" alt="用來垃圾分類的綠寶、白寶、黃寶及藍寶" /> </a> </li> <li> <a href="#"> <img src="images/DSC_0424.JPG" alt="龐貝城中用來表演的露天劇場" /> </a> </li> <li> <a href="#"> <img src="images/DSC_0535.JPG" alt="龐貝城中用來祭祀用的神壇" /> </a> </li> <li> <a href="#"> <img src="images/DSC_0575.JPG" alt="我來到一個島叫做卡不里島" /> </a> </li> <li> <a href="#"> <img src="images/DSC_0595.JPG" alt="Hotel Pazziella 的外觀" /> </a> </li> </ul> </div> </body> |
一樣都是很熟悉的 ul li,但要特別注意的是其中的圖片都需要加上 alt 屬性才行,因為這是接下來要用的描述文字的來源。接著再加上 CSS:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #abgne-block-20120509 { width: 300px; /* 圖片的寬 */ height: 242px; /* 圖片的高 + #abgne-block-20120509 .desc 的高 + #abgne-block-20120509 .controls li a 的高 */ overflow: hidden; } #abgne-block-20120509 ul, #abgne-block-20120509 ul li { margin: 0; padding: 0; list-style: none; } #abgne-block-20120509 ul.items { width: 300px; /* 圖片的寬 */ height: 201px; /* 圖片的高 */ overflow: hidden; } #abgne-block-20120509 a img { border: none; } |
基本上啦~現在這樣什麼鬼都看不出來。因為其中的描述文字及控制器等等的元素都是要用程式來產生的,所以再來看 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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | $(function(){ // 取得 #abgne-block-20120509 及 ul li 等相關元素 // _index 用來設定預設顯示第幾個 // speed 是用來控制輪播的速度用 var $block = $('#abgne-block-20120509'), $ul = $block.find('ul'), $li = $ul.find('li'), _index = 0, timer, speed = 1000, _isHover = false; // 一一產生用來放置描述文字的區塊 // 並產生控制器用的 ul 及 li // 其中還加入一個用來顯示目前筆數 / 總筆數的元素 var $desc = $('<span class="desc"></span>'), $prev = $('<li class="prev"><a href="#" class="prev" title="上一張"></a></li>'), $pauseAndPlay = $('<li><a href="#" class="pause" title="自動播放"></a></li>'), $next = $('<li><a href="#" class="next" title="下一張"></a></li>'), $last = $('<li><span class="last">' + (_index + 1) + ' / ' + $li.length + '</span></li>'), $controls = $('<ul class="controls"></ul>').append($prev, $pauseAndPlay, $next, $last); // 把描述區塊及控制器加到 $block 中 $block.append($desc, $controls); // 控制顯示圖片、描述文字及目前筆數使用 function create(){ var $item = $li.hide().eq(_index).show(); $desc.text($item.find('img').attr('alt')); $last.find('.last').text((_index + 1) + ' / ' + $li.length); } // 當點擊到 $controls 上的 li 時控制切換上下張及控制是否輪播 $controls.on('click', 'li', function(){ var $this = $(this), $a = $this.find('a'); // 如果點到的是上下張鈕 if($a.hasClass('prev') || $a.hasClass('next')){ // 計算要顯示那一張 _index = ($a.hasClass('prev') ? _index - 1 + $li.length : _index + 1) % $li.length; create(); }else{ // 如果點到的是暫停或是播放鈕 $a.toggleClass('pause play').attr('title', $a.hasClass('pause') ? '自動播放' : '暫停'); $a.hasClass('pause') && !_isHover ? timer = setTimeout(auto, speed) : clearTimeout(timer); } return false; }); $block.hover(function(){ // 當滑鼠移入 $block 時停止計時器 _isHover = true; clearTimeout(timer); }, function(){ // 當滑鼠移出 $block 時啟動計時器 // 如果現在 $pauseAndPlay a 的 class 中有 .pause 的話, 才啟動計時器 _isHover = false; if($pauseAndPlay.find('a').hasClass('pause')) timer = setTimeout(auto, speed); }); // 自動輪播使用 function auto(){ $next.click(); timer = setTimeout(auto, speed); } // 啟動計時器 timer = setTimeout(auto, speed); // 執行預設 create(); }); |
因為描述及控制器都是程式加上去的,所以也別忘了要補上相關的 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 | #abgne-block-20120509 .desc { display: block; font-weight: 700; line-height: 24px; font-size: 16px; height: 24px; overflow: hidden; } #abgne-block-20120509 .controls li { float: left; } #abgne-block-20120509 .controls li a { display: block; width: 17px; /* 圖示的寬 */ height: 19px; /* 圖示的高 */ background: url(images/controls.png) no-repeat 0 0; } #abgne-block-20120509 .controls li a.prev:hover { background-position: 0 -19px; } #abgne-block-20120509 .controls li .next { background-position: -51px 0; } #abgne-block-20120509 .controls li .next:hover { background-position: -51px -19px; } #abgne-block-20120509 .controls li .pause { background-position: -17px 0; } #abgne-block-20120509 .controls li .pause:hover { background-position: -17px -19px; } #abgne-block-20120509 .controls li .play { background-position: -34px 0; } #abgne-block-20120509 .controls li .play:hover { background-position: -34px -19px; } #abgne-block-20120509 .controls li .last { margin-left: 10px; line-height: 19px; /* 圖示的高 */ } |
完成後就能來預覽效果囉~
感謝辛苦分享~趕緊收藏起來!!
搶沙發~
非常感谢,有所收获.
謝謝你的專業,學到很多語法知識!
您的知識和經驗還真是豐富阿...真是獲益匪淺!!感恩!
請教一下,
我的next 按鈕,不知為什麼被擠到下面去,低了一個按鈕的高度(一般和over的狀態位置一樣)
改了下段這段css 也沒用耶。
#abgne-block-20120509 .controls li .next {
background-position: -51px 0;
}
如果直接用我的範例不會的話, 那麼這要看你的範例檔案才知道為什麼了~
可以的話弄個簡單但有問題的範例寄給我看看
謝謝老師! 現在ok了。
發現我原先的css 裡面就有 .next 的名稱
原以為與 #abgne-block-20120509 .controls li .next 父層級不同就沒關係
原來還是有影響到,謝謝你!
感謝這教學網
但是仿 MSN 台灣首頁控制器廣告展示,的按鈕出不來,是聯結那裡
controls.png又是什麼
滑過與按下,是聯結那裡
controls.png 是左下角那幾個按鈕用的圖片, 範例檔案應該都有附這些圖檔啦!
男丁老師您好,因為在您這搜尋有關廣告輪播的語法教學,剛好看到這一篇,因此想請教一下,如果說像是MSN美國網站 http://www.msn.com/ ,它的上方有一塊圖文混排的頭條新聞輪播,也可以利用JQ來表現嗎?還是需要用到其他語法呢?
Many thanks
是可以做到的, 就是基本的 slidershow 效果, 只是它滑動的區塊裡面放的有圖或是圖文混合而已.