Javascript/jQuery addClass/removeClass 用于翻译容器不起作用

我正在尝试制作一张可以移动幻灯片的幻灯片。如果我按左键，我希望我向左移动(内容的宽度为 358.8%，因此屏幕中显示的宽度更多(。但是，我编写的jQuery代码没有按照我想要的方式工作。请帮忙!!!!!!

**HTML CODE**
<body>
<div class="slideshow-container">
<div id="arrow-left" class="arrow"></div>
<div class="content">
<div class="mySlides fade">
<div class="content_container">
<img src="https://t1.kakaocdn.net/kakaocorp/operating/co/main-content/3254.png" class="contentImageRight">
<div class="ContentTextLeft">
HAHAHA
</div>
</div>
<div class="content_container">
<img src="https://t1.kakaocdn.net/kakaocorp/operating/co/main-content/3254.png" class="contentImageLeft">
<div class="ContentTextRight">
HAHAHA
</div>
</div>
<div class="content_container">
<img src="https://t1.kakaocdn.net/kakaocorp/operating/co/main-content/3254.png" class="contentImageRight">
<div class="ContentTextLeft">
HAHAHA
</div>
</div>
</div>
<div class="mySlides fade">
<div class="content_container">
<img src="https://t1.kakaocdn.net/kakaocorp/operating/co/main-content/3254.png" class="contentImageRight">
<div class="ContentTextLeft">
HAHAHA
</div>
</div>
<div class="content_container">
<img src="https://t1.kakaocdn.net/kakaocorp/operating/co/main-content/3254.png" class="contentImageLeft">
<div class="ContentTextRight">
HAHAHA
</div>
</div>
<div class="content_container">
<img src="https://t1.kakaocdn.net/kakaocorp/operating/co/main-content/3254.png" class="contentImageRight">
<div class="ContentTextLeft">
HAHAHA
</div>
</div>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
</body>

JavaScript/jQuery 代码

<script>
$(document).ready(function(){
$("#arrow-right").click(function(){
$( "slideshow-container" ).removeClass( "onePosition" );
$( "slideshow-container" ).addClass( "twoPosition" );
});
});
$(document).ready(function(){
$("#arrow-left").click(function(){
$( ".content" ).removeClass( ".twoPosition" );
$( ".content" ).addClass( ".onePosition" );
});
});
</script>

两个/一个位置的 CSS 代码

<style>
.onePosition{
transform: translate(5%);
transition: transform 1s ease-in-out;
}
.twoPosition{
transform: translate(-90%);
transition: transform 1s ease-in-out;
}
</style>

在此处输入图像描述

您的标签都没有"onePosition"或"twoPosition"作为类
您的逻辑应该全部位于 ONE documentReady 事件下，不需要为同一 eventListener 进行多个声明。
如果这是您的方法，请提供您的 CSS 规则，因为它们似乎是执行繁重工作的规则，这可以通过转换来实现

相关内容

最新更新

热门标签：