如何使用JavaScript进行幻灯片制作？

Question

我想创建一个滑出，在页面加载时自动滑出，停留5秒钟，然后滑入并显示一个按钮，单击或悬停该按钮再次将其滑出。

Answer 1

I've prepared a little fiddle that I think does what you're looking for.

<style>
#popup {
  width:300px;
  height:300px;
  top:50%;
  margin-top:-150px;
  background: grey;
  position:absolute;
  left: -300px;
  -transition:all 0.3s ease-in-out;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
}

#popup.active {
  left:0;
}

button { 
  float:right;
}
</style>

<div id="popup">
    <button id="close">Close</button>
</div>

<script>
  setTimeout(function() {
     document.getElementById('popup').className="active";
  }, 5000);

  document.getElementById('close').onclick=function () {
      document.getElementById('popup').className="";
  }
</script>