Question

您好我正在制作JS幻灯片放映脚本。我遇到的问题是我用来加载第二个img的slide2 div对框架的效果不佳。当您单击下一张幻灯片时，新潜水将放在框架的底部。我希望新框架在旧图像旁边。你能帮助我做对吗？生病了回答任何问题。

＆＃13;

$(document).ready(function() {
  $('#next_slide').on('click', function(e) {
    console.log("next_slide was clicked");
    $("#slide1").toggleClass('clicked');
    $("#slide2").toggleClass("clicked");
  });
});

＆＃13;

body {
  margin: 0px;
}
#main {
  display: flex;
  justify-content: center;
}
#slide_show {
  background-color: gray;
  border: 1px solid black;
  width: 50%;
  height: 350px;
  margin-top: 50px;
  display: flex;
}
#slide1 {
  width: 100%;
  height: 100%;
  background-image: url("http://rack.0.mshcdn.com/media/ZgkyMDEyLzEyLzA0L2UzL3RvcDEwdHdpdHRlLmJNMy5wbmcKcAl0aHVtYgkxMjAweDYyNyMKZQlqcGc/a5521f9c/816/top-10-twitter-pics-of-the-week-89ccc74f42.jpg");
}
#slide2 {
  width: 0%;
  float: right;
  height: 100%;
  position: fixed;
  background-image: url("http://rack.0.mshcdn.com/media/ZgkyMDEyLzEyLzA0L2UzL3RvcDEwdHdpdHRlLmJNMy5wbmcKcAl0aHVtYgkxMjAweDYyNyMKZQlqcGc/a5521f9c/816/top-10-twitter-pics-of-the-week-89ccc74f42.jpg");
}
#slid_container {
  width: 100%;
  height: 100%;
  background-color: gray;
}
#next_slide,
#last_slide {
  opacity: .5;
  width: 20px;
  height: 100%;
  background-color: yellow;
}
#slide1.clicked {
  transition: width 2s;
  width: 0px;
}
#slide2.clicked {
  transition: width 2.1s;
  width: 100%;
}

＆＃13;

<html>

<head>
  <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
</head>

<body>
  <div id="main">
    <div id="slide_show">
      <div id="last_slide">
      </div>
      <div id="slid_container">
        <div id="slide1">
        </div>
        <div id="slide2">
        </div>
      </div>
      <div id="next_slide">
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

看起来我能够通过将slid_container div的显示模式设置为flex并使每个转换为2s来破解修复。如果有更好的方法可以做到这一点，请随时回复。

制作JS添加幻灯片放映

1 个答案: