实现过程如下,全部代码写在一个HTML文件里面,可以复制到本地,加上图片地址即可查看运行效果。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>无限轮播图</title> <style media="screen"> /*样式设置*/ * { margin: 0px; padding: 0px; } #slider_wrap { width: 1600px; height: 270px; margin: 100px auto; border: 1px solid black; position: relative; overflow: hidden; } #slider_content { width: 4800px; height: 270px; position: absolute; } #slider_content img { width: 400px; height: 270px; float: left; } </style> </head> <body> <div id="slider_wrap"> <div id="slider_content"> <img src="img/1.jpg" alt="" /> <img src="img/2.jpg" alt="" /> <img src="img/3.jpg" alt="" /> <img src="img/4.jpg" alt="" /> <img src="img/5.jpg" alt="" /> <img src="img/6.jpg" alt="" /> </div> </div> <form class="btn_sets" action="index.html" method="post" style="margin-left: 900px"> <input type="button" name="name" value="下一张" onclick="btnLeft()"> <input type="button" name="name" value="上一张" onclick="btnRight()"> </form> </body> <script type="text/javascript"> var sliderContent = document.getElementById('slider_content'); // 定义一个变量x,记录x轴的位置 var x = 0; // 将slider_content中的图片复制一次 sliderContent.innerHTML += sliderContent.innerHTML; // 添加鼠标点击事件 function btnLeft() { if (x == -2400) { //假如图片移动到最后一个时,将x设置为0; x = 0; } x -= 400; //图片沿x轴方向向左移动400px sliderContent.style.left = x + 'px'; //图片左移 } function btnRight() { if (x == 0) { x = -2400; } x += 400; sliderContent.style.left = x + 'px'; } setInterval('btnLeft()',5000); </script> </html>
上面的轮播图代码运行之后的效果截图: