JavaScript圖片輪顯是一個常用的前端功能，它可以在網頁上動態展示多張圖片并實現無限循環播放。我們來看一個經典的例子：百度首頁的圖片輪顯。當我們瀏覽百度首頁時，可以看到頁面上的頂部會不斷地輪播不同的圖片。這就是一個非常典型的JavaScript圖片輪顯效果。
要實現這種圖片輪顯效果，我們需要使用JavaScript監聽網頁加載及滾動事件，控制圖片的顯示和隱藏。下面是一段簡單的JavaScript代碼，實現了一組三張圖片的輪顯效果：
<html>
<head>
<style>
.slider {width: 400px; height: 300px; overflow: hidden;}
.slider img {width: 400px; height: 300px; float: left; display: none;}
</style>
<script>
var count = 0;
var timer = null;
function slider() {
var imgs = document.querySelectorAll('.slider img');
var len = imgs.length;
count++;
if (count >= len) {
count = 0;
}
for (var i = 0; i < len; i++) {
imgs[i].style.display = 'none';
}
imgs[count].style.display = 'block';
}
window.onload = function() {
timer = setInterval(slider, 2000);
}
window.onunload = function() {
clearInterval(timer);
}
</script>
</head>
<body>
<div class="slider">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
</body>
</html>在這段代碼中，我們使用了兩個JavaScript函數：slider和setInterval。slider函數是具體的輪顯實現函數，它會在定時器調用的時候被執行。setInterval函數是一個定時器函數，它用于定時執行slider函數。我們在頁面加載時使用window.onload函數啟動定時器，當頁面關閉時使用window.onunload函數清除定時器。
上述代碼實現的圖片輪顯效果非常簡單，但是它只能輪顯三張圖片。我們可以將該代碼復制多次，并修改圖片地址，來實現更多的圖片輪顯。但是，這樣做會造成代碼臃腫，代碼維護難度也會加大。我們可以將該代碼進行封裝，使它變得更加通用和易用。
下面是一個封裝好的JavaScript圖片輪顯類：
<html>
<head>
<style>
.slider {width: 400px; height: 300px; overflow: hidden;}
.slider img {width: 400px; height: 300px; float: left; display: none;}
</style>
<script src="slider.js"></script>
</head>
<body>
<div class="slider"></div>
<script>
var imgs = [
'img1.jpg',
'img2.jpg',
'img3.jpg'
];
var slider = new Slider('.slider', imgs);
slider.start();
</script>
</body>
</html>在這段代碼中，我們使用了一個名為Slider的函數，它接受兩個參數：輪顯容器的選擇器和圖片數組。在Slider函數中，我們使用了JavaScript面向對象的方式來封裝具體實現。我們使用了原型（prototype）來定義了start和stop方法，它們分別用于啟動和停止定時器。我們使用了構造函數（constructor）來初始化圖片輪顯容器和圖片。這樣，我們就可以根據需要創建多個Slider對象，實現不同的圖片輪顯效果。
JavaScript圖片輪顯是一個非常實用的前端功能，它可以為網頁提供動態、生動的展示效果。我們可以根據需要選擇不同的實現方式，來實現不同的圖片輪顯效果。但是，我們要注意代碼的可讀性、可維護性，盡量使用封裝好的類或庫，來提高代碼的復用性和可擴展性。
上一篇dubbo php