如何使用 Javascript 制作幻灯片？答案

【问题标题】：How Can I Make A Slide-Out Using Javascript?如何使用 Javascript 制作幻灯片？
【发布时间】：2015-09-23 02:04:57
【问题描述】：

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

【问题讨论】：

101helper.blogspot.com/2015/09/… 这是我的博客，你可以在这里看到一个我已经尝试过的演示......它的浮动很好，但它在页面末尾下降。我希望它在帖子页脚到达时停止。
在该页面上，您可以看到“推荐文章”它浮动但浮动到页面末尾我希望它停在帖子页脚处
嗨@FahimRaza，请花时间阅读此页面：stackoverflow.com/help/how-to-ask。您需要提供问题所需的所有信息，包括代码。
我没有任何代码，所以我没有分享它。

标签： javascript jquery css

【解决方案1】：

我准备了一个little fiddle，我认为它可以满足您的需求。

<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>

【讨论】：

这个工作正常，但 5 秒后没有滑入。我希望它滑出然后在 5 秒后滑入并显示一个可以单击以再次显示它的按钮
我只是给了你足够的开始，我相信你可以适应你的需要。该论坛旨在帮助解决特定的编程问题，而不是为您构建网站。