这个实现起来还是挺简单的，实现方法也很多。今天给大家介绍一个非常巧妙的方法，利用JS中的this。
先是HTML代码
<html>
<head>
<title>JS实现轮播图</title>
</head>
<style>
.item{
float:left;
width:100px;
}
</style>
<body>
<img id="display" src="img2.jpg" width="400px">
<div>
<div><img class="item" src="img1.jpg" οnmοuseοver="rudy(this)"></div>
<div><img class="item" src="img2.jpg" οnmοuseοver="rudy(this)"></div>
<div><img class="item" src="img3.jpg" οnmοuseοver="rudy(this)"></div>
</div>
</body>
</html>很简单，就是上面一个img用来显示图片，下面三个是用来选择的图片。显示效果见下图：
这边注意到，在下面的图片添加事件时，代码如下：
οnmοuseοver="rudy(this)"这就是普通的鼠标上浮事件（名字随便说的），传入this这个this就是img元素本事，而且保、包含那个图片的各个属性。这个时候我们就可以在JS中用这个this。代码如下：
function rudy(img){
var display = document.getElementById("display");
display.src = img.src
}就两句。把显示图片的src改为你选择图片的src
