Javascript 如何在此幻灯片中添加更多功能（图像从右向左移动而不是褪色？

我正在实现一段关于幻灯片的代码，在该代码中，图像每三秒会褪色一次，从而允许下一个幻灯片显示：

<style>
#slides {
    position: relative;
    height: 300px;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.showing {
    opacity: 1;
    z-index: 2;
}
</style>

<ul id="slides">
    <li class="slide showing">
    <img src="" style="width: 100%;" /> 
    </li>
    <li class="slide">
    <img src="" style="width: 100%;" /> 
    </li>
    <li class="slide">
    <img src="" style="width: 100%;" /> 
    </li>
    <li class="slide">
    <img src="" style="width: 100%;" /> 
    </li>
    <li class="" style="width: 100%;" /> 
    </li>
</ul>

<script>
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,3000);

function nextSlide() {
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}
</script>

#幻灯片{
位置：相对位置；
高度：300px；
填充：0px；
边际：0px；
列表样式类型：无；
}
.幻灯片{
位置：绝对位置；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
不透明度：0；
z指数：1；
-webkit转换：不透明度1s；
-moz转变：不透明度1s；
-o-转变：不透明度1s；
过渡：不透明度1s；
}
.展示{
不透明度：1；
z指数：2；
}












var slides=document.queryselectoral（“#slides.slide”）；
var currentSlide=0；
var slideInterval=setInterval（nextSlide，3000）；
函数nextSlide（）{
幻灯片[currentSlide]。类名='slide'；
当前幻灯片=（当前幻灯片+1）%slides.length；
幻灯片[currentSlide]。类名='slide showing'；
}

尽管如此，我仍在努力实现一种动画，使图像每三秒从右向左移动一次（如滑动），而不是褪色

---

有人知道实现这一点的方法吗？

我在这里没有看到任何动画代码-你试图使用的从右到左动画代码在哪里？@Eduardo:使用无数可用插件中的一个。@1stthomas你能分享一个与我正在寻找的内容相关的链接吗？@Eduardo:例如-有一些选项可以让它从中滑动e到w或v.v。