<div class="container">
  <div id="slide">
    <div class="item" style="background-image: url('http://p3.qhimg.com/bdr/__85/t01a2c69f5b7eeac889.jpg')">
      <div class="content">
        <div class="name">轮播</div>
        <div class="des">这是一个轮播效果</div>
        <button>查看更多</button>
      </div>
    </div>
    <div class="item" style="background-image: url('http://p4.qhimg.com/bdr/__85/t012fca6fa6fe728aca.jpg')">
      <div class="content">
        <div class="name">轮播</div>
        <div class="des">这是一个轮播效果</div>
        <button>查看更多</button>
      </div>
    </div>
    <div class="item" style="background-image: url('http://p8.qhimg.com/bdr/__85/t01a11e3b13964fd5e9.jpg')">
      <div class="content">
        <div class="name">轮播</div>
        <div class="des">这是一个轮播效果</div>
        <button>查看更多</button>
      </div>
    </div>
    <div class="item" style="background-image: url('http://p8.qhimg.com/bdr/__85/t0179da5c3c2aa9e571.jpg')">
      <div class="content">
        <div class="name">轮播</div>
        <div class="des">这是一个轮播效果</div>
        <button>查看更多</button>
      </div>
    </div>
    <div class="item" style="background-image: url('http://p3.qhimg.com/bdr/__85/t014f60621f095ece10.jpg')">
      <div class="content">
        <div class="name">轮播</div>
        <div class="des">这是一个轮播效果</div>
        <button>查看更多</button>
      </div>
    </div>
    <div class="item" style="background-image: url('http://p7.qhimg.com/bdr/__85/t01c79d6c25a04165ed.jpg')">
      <div class="content">
        <div class="name">轮播</div>
        <div class="des">这是一个轮播效果</div>
        <button>查看更多</button>
      </div>
    </div>
  </div>
  <div class="buttons">
    <div class="s_button">&lt;</div>
    <div class="s_button">&gt;</div>
  </div>
</div>

body {
  background-color: #eaeaea;
  overflow: hidden;
}

.container {
  width: 1000px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: #f5f5f5;
  padding: 50px;
  box-shadow: 0 30px 50px #dbdbdb;
}

#slide {
  width: max-content;
  margin-top: 50px;
}

.item {
  width: 200px;
  height: 300px;
  background-position: 50% 50%;
  display: inline-block;
  background-size: cover;
  position: absolute;
  top: 50%;
  /* transform: translateY(-50%); */
  margin-top: -150px;
  border-radius: 20px;
  box-shadow: 0 30px 50px #505050;
  transition: 0.5s;
}

.item:nth-child(1),
.item:nth-child(2) {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* transform: translate(0); */
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
}

.item:nth-child(3) {
  left: 50%;
}

.item:nth-child(4) {
  left: calc(50% + 220px);
}

.item:nth-child(5) {
  left: calc(50% + 440px);
}

.item:nth-child(n+6) {
  left: calc(50% + 660px);
  opacity: 0;
}

.item .content {
  width: 300px;
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
  color: #eee;
  display: none;
}

.item:nth-child(2) .content {
  display: block;
}

.item .name {
  font-size: 40px;
  font-weight: bold;
  opacity: 0;
  transform: translateY(100px);
  filter: blur(20px);
  animation: showcontent 1s ease-in-out 1 forwards;
}

.item .des {
  margin: 20px 0;
  opacity: 0;
  transform: translateY(100px);
  filter: blur(20px);
  animation: showcontent 1s ease-in-out 0.3s 1 forwards;
}

.item button {
  padding: 10px 20px;
  border: none;
  opacity: 0;
  transform: translateY(100px);
  filter: blur(20px);
  animation: showcontent 1s ease-in-out 0.6s 1 forwards;
}

@keyframes showcontent {
  form {
    opacity: 0;
    transform: translateY(100px);
    filter: blur(20px);
  } to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.buttons {
  width: 100%;
  position: absolute;
  bottom: 50px;
  margin-left: -50px;
  text-align: center;
}

.s_button {
  box-sizing: border-box;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: gray;
  background-color: #fff;
  font-size: 25px;
  border-radius: 50%;
  font-weight: bold;
  border: 1px solid #555;
  margin: 0 25px;
  transition: 0.5s;
}

.s_button:hover {
  cursor: pointer;
  background-color: #ccc;
}

let _direction = true
const _move = () => {
  const lists = document.querySelectorAll('.item')

  if (_direction) {
    document.querySelector('#slide').appendChild(lists[0])
  } else {
    document.querySelector('#slide').prepend(lists[lists.length - 1])
  }
}

let timer = setInterval(_move, 2500)

document.querySelector('.container').addEventListener('mouseover', () => {
  clearInterval(timer)
})

document.querySelector('.container').addEventListener('mouseout', () => {
  _direction = true
  timer = setInterval(_move, 2500)
})

document.querySelectorAll('.s_button')[1].onclick = () => {
  _direction = true
  _move()
}

document.querySelectorAll('.s_button')[0].onclick = () => {
  _direction = false
  _move()
}