今天带来的是前端里图片轮播的实现，可以说，这两种方法都很简单，尤其第一种，只要是有点基础的应该都可以看懂，这也是小编花费了一定时间想到的代码较少的方式。（图片我放在文末了）
当然也有更复杂的图片，也会有人说第一种方法无法实现链接跳转，其实我只是实现了图片轮播，如果可以做的到轮播，相信聪明的你也可以做到链接跳转的。第二种方法就完全可以加上链接跳转，但是相对第一种方法，第二种理解起来更复杂，但其实只要学会了浮动和层的概念就可以看懂，很像PS中的层的概念。
1、通过背景实现（带按钮变换图片）
首先，是主体部分：
<body onload="showImg()"><div id="ad"><div id="num"><input type="button" name="num1" id="num1" value="1" onclick="showImg(1)"/><input type="button" name="num2" id="num2" value="2" onclick="showImg(2)"/><input type="button" name="num3" id="num3" value="3" onclick="showImg(3)"/><input type="button" name="num4" id="num4" value="4" onclick="showImg(4)"/></div></div>
</body>然后看看style设置：
<style type="text/css">* {margin: 0;padding: 0;}#ad {width: 360px;height: 190px;margin: 0 auto;}
</style>最后是js部分（这是精髓）：
<script type="text/javascript">var temp = 1; //用来保存哪个图片显示function showImg(changNum) { //让背景图片显示if (Number(changNum)) {//判断点击了要显示图片的按钮clearTimeout(t);temp = changNum;}document.getElementById("ad").style.backgroundImage = "url(images/ad-0" + temp + ".jpg)";temp++;if(temp == 5) {temp = 1;}t = setTimeout("showImg()", 1000);//刷新时间}
</script>2、通过浮动实现（不带按钮，也可以实现带按钮，看懂了第一种你可以自己动手写入按钮）
主体部分：
<body onload="hiddenImg()"><div class="wide"><img src="images/1.jpg" /><div id="ad0"><img src="images/2.gif"/></div><div id="ad1"><img src="images/ad-01.jpg"/></div><div id="ad2"><img src="images/ad-02.jpg"/></div><div id="ad3"><img src="images/ad-03.jpg"/></div><div id="ad4"><img src="images/ad-04.jpg"/></div></div>
</body>style部分：
<style type="text/css">*{margin: 0;padding: 0;}.wide{width: 360px;height: 190px;margin: 0 auto;background-color: yellow;}#ad0,#ad1,#ad2,#ad3,#ad4{position: absolute;left: 490;top: 0;z-index: 1;}
</style>js部分：
<script type="text/javascript">var temp = 0;//用来保存应该从哪个图片开始隐藏function showImg(){//让所有图片显示for (var i = 0; i <= 4;i++ ) {document.getElementById("ad"+i+"").style.display = "block";}}function hiddenImg(){showImg();//先让所有图片显示for (var i = temp;i <= 4;i++ ) {//判断需要隐藏的图片document.getElementById("ad"+i+"").style.display = "none";}temp++;if (temp == 6) {temp = 0;}setTimeout("hiddenImg()",1000);}
</script>图片如下：
