無限輪播圖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>
結果如圖所示：
