<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
.stage {
300px;
height: 200px;
border: 10px solid black;
margin: 50px;
margin-left: 200px;
overflow: hidden;
position: relative;
}
.ad-banner {
1500px;
height: 200px;
}
.ad {
300px;
height: 200px;
float: left;
font-size: 50px;
line-height: 200px;
color: white;
text-align: center;
}
.left-btn,
.right-btn {
height: 200px;
20px;
position: absolute;
line-height: 200px;
background-color: gray;
opacity: 0.5;
font-size: 20px;
text-align: center;
}
.left-btn {
left: 0px;
top: 0px;
}
.right-btn {
right: 0px;
top: 0px;
}
.left-btn:hover,
.right-btn:hover {
cursor: pointer;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="stage">
<div class="left-btn">
<</div>
<div class="right-btn">></div>
<div class="ad-banner">
<div class="ad" style="background-color: green;">1</div>
<div class="ad" style="background-color: royalblue;">2</div>
<div class="ad" style="background-color: red;">3</div>
<div class="ad" style="background-color: yellow;">4</div>
<div class="ad" style="background-color: gray;">5</div>
</div>
</div>
</body>
</html>
<script>
var speed = 10;
var count = 1;
var arr = Array();
document.getElementsByClassName("right-btn")[0].onclick = function() {
arr.push(window.setInterval(moveToLeft, 10));
}
function moveToLeft() {
var banner = document.getElementsByClassName("ad-banner")[0];
if(banner.offsetLeft > count * (-300)&&count<5) {
banner.style.marginLeft = banner.offsetLeft - speed + "px";
} else {
if(count<5)
{count++;}
for(var i in arr) {
window.clearInterval(arr[i]);
}
}
}
document.getElementsByClassName("left-btn")[0].onclick = function() {
arr.push(window.setInterval(moveToRight, 10));
}
function moveToRight() {
var banner = document.getElementsByClassName("ad-banner")[0];
if(banner.offsetLeft < (count-2) * (-300)&&count>1) {
banner.style.marginLeft = banner.offsetLeft + speed + "px";
} else {
if(count>1)
{count--;}
for(var i in arr) {
window.clearInterval(arr[i]);
}
}
}
</script>
