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图片轮显是一个非常实用的前端功能，它可以为网页提供动态、生动的展示效果。我们可以根据需要选择不同的实现方式，来实现不同的图片轮显效果。但是，我们要注意代码的可读性、可维护性，尽量使用封装好的类或库，来提高代码的复用性和可扩展性。