CSS圖片幻燈制作是網(wǎng)頁設(shè)計中比較常見的一個特效,可以讓網(wǎng)站看起來更加生動,增加用戶的視覺體驗。下面我們將介紹如何通過CSS代碼實現(xiàn)圖片幻燈。
// HTML代碼 <div class="slider"> <img src="image1.jpg" alt="圖片1"> <img src="image2.jpg" alt="圖片2"> <img src="image3.jpg" alt="圖片3"> </div> // CSS代碼 .slider { width: 600px; height: 400px; position: relative; overflow: hidden; } .slider img { width: 600px; height: 400px; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slider img:first-child { opacity: 1; } // JS代碼 var images = document.querySelectorAll('.slider img'); var index = 0; function slider() { for (var i = 0; i< images.length; i++) { images[i].style.opacity = 0; } images[index].style.opacity = 1; index++; if (index == images.length) { index = 0; } } setInterval(slider, 5000);
以上代碼中,首先我們需要定義一個包含圖片的div容器,并設(shè)置容器的寬高和position屬性。然后給其中的圖片設(shè)置absolute屬性,并定義其位置在容器的左上角,同時設(shè)置opacity屬性為0,讓其初始時處于隱藏狀態(tài)。使用CSS3的transition屬性實現(xiàn)圖片的漸變效果。
接著是JS部分,我們首先獲取所有的圖片元素和一個用于記錄圖片索引的變量。然后定義一個名為slider的函數(shù),用于實現(xiàn)圖片之間的切換。在函數(shù)中,首先將所有圖片的opacity屬性設(shè)置為0,再將當(dāng)前圖片的opacity屬性設(shè)置為1,然后將索引加一,若索引等于圖片數(shù)量則重置為0。最后使用setInterval函數(shù)來調(diào)用slider函數(shù)實現(xiàn)自動播放。
通過以上代碼,我們可以簡單地實現(xiàn)一個CSS圖片幻燈效果,并豐富網(wǎng)頁的視覺效果。