CSS輪播大圖指的是通過CSS代碼控制網頁中的圖片及內容等輪流顯示,形成動態改變并展示多個內容的效果。CSS輪播大圖現在越來越受到Web開發者的歡迎,越來越多的網站采用了CSS輪播大圖作為宣傳和展示的手段。
/*CSS代碼*/ .slide-container { margin: 0 auto; position: relative; overflow: hidden; width: 600px; height: 400px; } .slide-container img { width: 100%; height: 100%; display: none; /* 隱藏圖片 */ } .slide-container img:first-child { display: block; /* 默認顯示第一張圖片 */ } .slide-nav { position: absolute; bottom: 20px; left: 0; right: 0; margin: 0 auto; width: 50px; height: 10px; text-align: center; } .slide-nav span { display: inline-block; width: 8px; height: 8px; margin: 0 5px; cursor: pointer; border-radius: 50%; background-color: #ccc; } .slide-nav span.active { background-color: #f00; } .slide-prev, .slide-next { position: absolute; top: 50%; margin-top: -15px; z-index: 1; cursor: pointer; background-color: rgba(0,0,0,.5); color: #fff; padding: 10px; } .slide-prev { left: 20px; } .slide-next { right: 20px; }
從以上CSS代碼可以看出,實現CSS輪播大圖的關鍵是控制圖片的顯示與隱藏。首先通過設置.slide-container為relative定位,并設置寬度和高度,使其成為一個容器。接著通過設置.slide-container img的display:none,使其隱藏圖片。
為了讓第一張圖片顯示出來,需要設置.slide-container img:first-child的display:block。接下來用slide-nav類來控制圖片的切換。設置一個span標簽來控制切換圖片時的小圓點,同時通過設置active類來控制當前圓點的顯示。
最后,通過.slide-prev和.slide-next類來分別實現向前和向后切換圖片的功能。整個CSS代碼的核心是通過控制CSS中的屬性和元素顯示和隱藏來實現CSS輪播大圖的效果。
上一篇css 輪播圖屬性