<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
* { box-sizing: border-box;margin: 0;padding: 0; }
.slider {
width: 300px;
height: 170px;
overflow: hidden;
position: relative;
}
.slider__arrow {
width: 20px;
height: 20px;
position: absolute;
top: 50%;
background-color: #3294FD;
text-align: center;
line-height: 20px;
color: #fff;
z-index: 9;
cursor: pointer;
}
.slider__left { left: 0; }
.slider__right { right: 0; }
.slider__container {
width: 900px;
height: 170px;
position: absolute;
top: 0;
left: 0;
}
.slider__item {
width: 100px;
height: 170px;
line-height: 170px;
background: pink;
display: block;
float: left;
text-align: center;
}
.slider__item:hover {
background-color: #F7F7F7;
}
.slider__arrow.hide{
display: none;
}
.slider {
margin: 20px auto;
}
.slider__container.animate{
transition: left .8s;
}
.slider__container.left{
left: -100px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var left = document.querySelector(".slider__left"),
right = document.querySelector(".slider__right"),
container = document.querySelector(".slider__container"),
timer;
right.addEventListener("click", function() {
window.clearTimeout(timer);
var last = container.querySelector(".slider__item:last-child");
var first = container.querySelector(".slider__item:first-child");
container.classList.remove("animate");
if (!container.classList.contains("left")) {
container.classList.add("left");
container.insertBefore(last, first);
}
timer = window.setTimeout(function() {
container.classList.add("animate");
container.classList.remove("left")
},30)
});
left.addEventListener("click", function() {
window.clearTimeout(timer);
var first = container.querySelector(".slider__item:first-child");
container.classList.remove("animate");
if (container.classList.contains("left")) {
container.classList.remove("left");
container.appendChild(first)
}
timer = window.setTimeout(function() {
container.classList.add("animate");
container.classList.add("left")
},30)
})
});
</script>
</head>
<body>
<div class="slider">
<div class="slider__arrow slider__left"><</div>
<div class="slider__arrow slider__right">></div>
<div class="slider__container">
<div class="slider__item">1</div>
<div class="slider__item">2</div>
<div class="slider__item">3</div>
<div class="slider__item">4</div>
<div class="slider__item">5</div>
<div class="slider__item">6</div>
<div class="slider__item">7</div>
<div class="slider__item">8</div>
<div class="slider__item">9</div>
</div>
</div>
</body>
</html>
