您好，我正在制作一个 JS 幻灯片放映脚本。我遇到的问题是我用来加载第二个 img 的 slide2 div 不能很好地处理框架。当您单击下一张幻灯片时，新的潜水将放在框架的底部。我希望新框架紧挨着旧图像。你们能帮我解决这个问题吗？我会在附近回答任何问题。
$(document).ready(function() {
$('#next_slide').on('click', function(e) {
console.log("next_slide was clicked");
$("#slide1").toggleClass('clicked');
$("#slide2").toggleClass("clicked");
});
});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%;
}<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>最佳答案
看起来我能够通过将 slid_container div 的显示模式设置为 flex 并将转换都设置为 2s 来破解修复。如果有更好的方法来做到这一点，请随时回复。
关于javascript - 制作一个JS添加幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36884154/