HTML div輪播是一種常見的網頁設計元素,它可以讓網頁展示多個內容,并在一定時間內自動切換展示,非常實用。下面就是一段HTML div輪播的示例代碼:
<div class="carousel"> <div class="carousel-inner"> <div class="item active"> <img src="image1.jpg"> </div> <div class="item"> <img src="image2.jpg"> </div> <div class="item"> <img src="image3.jpg"> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
上面的代碼中,首先使用了一個class為“carousel”的div元素作為整個HTML div輪播的容器。在這個div內部,使用了一個class為“carousel-inner”的div元素,用于包含所有要輪播的內容,在這個div內部,可以使用多個class為“item”的div元素,每個item元素內部均可以添加一個img元素作為要展示的內容。通過在item元素上添加“active”class,可以設置初始展示的內容。
在輪播效果的實現上,代碼通過為carousel div元素下的左右控制按鈕a元素添加class為“left carousel-control”和“right carousel-control”,并在這些a元素的href屬性和data-slide屬性中定義切換效果,即可達到自動切換的效果。
下一篇靠底部css