简单介绍无限轮播图，js源代码
用js简单的编写无限轮播图
无限轮播图js源代码，今天介绍一下用js简单的编写无限轮播图
<!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>
结果如图所示：
版权声明：本文为spring-qingfeng原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。