| 製作顯示於頁面上半部主視覺圖片的 製作重點 Slideshow, 主要圖片會顯示於中間, 兩側則分別是上一張與下一張圖片並用黑色半透明圖片覆蓋在上面。由於前後圖片顯示於兩側, 因此畫面寬度即使變動也能維持中間圖片的滿版顯示, 這樣主要圖片就可讓人印象深刻。 Slideshow 的 HTML 首先撰寫 Slideshow 的 HTML, 用 li 元素配置所有圖片, 移動按鈕的連結配置在圖片列
表元素下方。這次範例要使用單一圖片對應各種螢幕大小, 因此不在 img 元素中設定
width、height 屬性, 而是在 CSS 中控制 1-1 。
配置位置一般是放在頁首區域, 也可依照需求配置在頁尾區域也是沒關係的。 
以 CSS 準備 Slideshow 外觀 接著在 CSS 中設定所有圖片橫向配置, 此外考量如果中間圖片與兩側都以相同的方式顯
示, 會無法突顯出主題, 所以兩側圖片上用半透明的點狀圖片覆蓋, 如此可讓中間顯示圖
片更明顯, 兩側圖片更有設計感, 讓整個幻燈片效果更有特色 2-1 。 
 .......﹝詳細內容﹞ 更多內容請見 《 接案我最行: jQuery 經典範例必殺技 》 
|
