製作顯示於頁面上半部主視覺圖片的 製作重點 Slideshow, 主要圖片會顯示於中間, 兩側則分別是上一張與下一張圖片並用黑色半透明圖片覆蓋在上面。由於前後圖片顯示於兩側, 因此畫面寬度即使變動也能維持中間圖片的滿版顯示, 這樣主要圖片就可讓人印象深刻。
製作重點
- 製作 Slideshow 的圖片列表
- 以 CSS 準備 Slideshow 外觀
- 新增圖片的切換處理
首先撰寫 Slideshow 的 HTML, 用 li 元素配置所有圖片, 移動按鈕的連結配置在圖片列 表元素下方。這次範例要使用單一圖片對應各種螢幕大小, 因此不在 img 元素中設定 width、height 屬性, 而是在 CSS 中控制 配置位置一般是放在頁首區域, 也可依照需求配置在頁尾區域也是沒關係的。

接著在 CSS 中設定所有圖片橫向配置, 此外考量如果中間圖片與兩側都以相同的方式顯 示, 會無法突顯出主題, 所以兩側圖片上用半透明的點狀圖片覆蓋, 如此可讓中間顯示圖 片更明顯, 兩側圖片更有設計感, 讓整個幻燈片效果更有特色

…….﹝詳細內容﹞
更多內容請見 《接案我最行: jQuery 經典範例必殺技 》

|
No comments have been made. Use this form to start the conversation :)