今天我用jQuery寫了一個(gè)有趣的輪播圖,里面嵌套了視頻。下面是輪播圖的代碼:
<div class="carousel"> <div class="carousel-inner"> <div class="item active"> <img src="image1.jpg" alt="image1"> <video src="video1.mp4"></video> </div> <div class="item"> <img src="image2.jpg" alt="image2"> <video src="video2.mp4"></video> </div> <div class="item"> <img src="image3.jpg" alt="image3"> <video src="video3.mp4"></video> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"></a> </div>
在輪播圖的代碼中,我使用了HTML5的<video>標(biāo)簽嵌入了視頻。視頻可以自動(dòng)播放,也可以通過控制條進(jìn)行調(diào)節(jié)。下面是啟用輪播圖的jQuery代碼:
$(document).ready(function(){ $('.carousel').carousel({ interval: 3000 }); });
這段代碼表示輪播圖每3秒鐘切換一次圖片和視頻,實(shí)現(xiàn)了輪播的效果。通過這種方式,我們可以為網(wǎng)站添加更豐富的內(nèi)容,提高用戶的體驗(yàn)。