CSS手動(dòng)輪播圖是一種常用的展示圖片或內(nèi)容的方式,通過(guò)利用CSS的動(dòng)畫(huà)效果來(lái)實(shí)現(xiàn)切換不同的頁(yè)面。下面是一個(gè)簡(jiǎn)單的CSS手動(dòng)輪播圖代碼實(shí)現(xiàn),您可以根據(jù)需要進(jìn)行修改和調(diào)整。
<div class="wrapper"><div class="slider"><div class="slide slide1 active"><img src="image1.jpg"></div><div class="slide slide2"><img src="image2.jpg"></div><div class="slide slide3"><img src="image3.jpg"></div></div><ul class="controls"><li class="nav1 active"></li><li class="nav2"></li><li class="nav3"></li></ul></div><style>.wrapper { position: relative; margin: 0 auto; width: 800px; height: 500px; } .slider { position: relative; width: 100%; height: 100%; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; } .slide.active { opacity: 1; } .controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); list-style: none; } .controls li { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; background-color: #fff; opacity: 0.5; transition: opacity 0.5s ease-in-out; cursor: pointer; } .controls li.active { opacity: 1; } .nav1 { background-color: #f00; } .nav2 { background-color: #0f0; } .nav3 { background-color: #00f; } .nav1.active, .nav1:hover { background-color: #f00 !important; } .nav2.active, .nav2:hover { background-color: #0f0 !important; } .nav3.active, .nav3:hover { background-color: #00f !important; }
代碼中使用了一個(gè)包裹容器,內(nèi)部包含一個(gè)輪播圖和一個(gè)控制按鈕的ul標(biāo)簽,每個(gè)輪播圖都是一個(gè)占滿整個(gè)容器的div標(biāo)簽。在樣式表中,通過(guò)設(shè)置位置、寬度、高度和背景色來(lái)實(shí)現(xiàn)輪播圖和控制按鈕的外觀效果,并采用Opacity和Transition屬性實(shí)現(xiàn)輪播圖的動(dòng)畫(huà)效果。此外,JavaScript還可以用來(lái)控制輪播圖的行為,例如在控制按鈕被點(diǎn)擊時(shí)切換輪播圖等。