我已经用动态导入的图像制作了 CSS 幻灯片，但现在在添加过渡时遇到问题。我希望当我单击下一个或上一个按钮时图像能够滑动，但找不到此问题的解决方案。这是我当前代码的片段：
$("#Next").click(function(){
$("#Slider").append($("#Slider img:first-of-type"));
});
$("#Prev").click(function(){
$("#Slider").prepend($("#Slider img:last-of-type"));
});html{
align-items: center;
background-color: #31353D;
display: flex;
justify-content: center;
}
#Wrapper {
margin-top: 20px;
}
#Slideshow{
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
position: relative;
}
#Slider{
border: 5px solid #1C1D21;
height: 568px;
overflow: hidden;
width: 1024px;
}
#Slider img{
height: 568px;
width: 1024px;
transition: all 1s;
}
#Arrows{
display: flex;
justify-content: space-between;
height: 30px;
position: absolute;
width: 1024px;
}
#Arrows i{
background-color: rgba(255, 255, 255, …我有一个为朋友开发的网站，只是为了好玩，但我在使用 CSS 时遇到了问题。我遵循了https://www.fireship.io中有关主题更改的教程。我的问题是，当我单击 safari 上的主题时，我的下拉菜单不会很好...下拉菜单。（ps.它在任何其他浏览器上都可以正常工作）
// DOM Elements
const darkButton = document.getElementById("dark");
const lightButton = document.getElementById("light");
const solarButton = document.getElementById("solar");
const body = document.body;
// Apply the cached theme on reload
const theme = localStorage.getItem("theme");
const isSolar = localStorage.getItem("isSolar");
if (theme) {
body.classList.add(theme);
isSolar && body.classList.add("solar");
}
// Button Event Handlers
darkButton.onclick = () => {
body.classList.replace("light", "dark");
localStorage.setItem("theme", "dark");
};
lightButton.onclick = () => {
body.classList.replace("dark", "light");
localStorage.setItem("theme", "light");
};
solarButton.onclick = () => {
if (body.classList.contains("solar")) …