Javascript 在纯JS幻灯片中添加css3转换

这里是一个简单的Js幻灯片，但没有过渡效果。 js代码：

function plusDivs(e) {
    showDivs(slideIndex += e)
}

function showDivs(e) {
    var s, l = document.getElementsByClassName("mySlides");
    for (e > l.length && (slideIndex = 1), e < 1 && (slideIndex = l.length), s = 0; s < l.length; s++) l[s].style.display = "none";
    l[slideIndex - 1].style.display = "block"
}
var slideIndex = 1;
showDivs(slideIndex); // This is just a sample script. Paste your real code (javascript or HTML) here.

if ('this_is' == /an_example/) {
    of_beautifier();
} else {
    var a = b ? (c % d) : e[f];
}

演示页面滚动到底部：

---

我的目标是在点击下一张图片时添加一些过渡效果。我试图直接在css中添加转换，但它不起作用

您正在使用display:block属性切换图像。显示不是块，因为它只有两种状态：块或隐藏

我只是写了一些粗略的代码给你一个指导。它不工作或测试代码，所以你需要调整它一点。。。希望能有帮助

下面的代码应该提供从右到左的转换

/* Set the overflow on slides class to hidden.*/
/* Position relative to allow absolute positioning on mySlides */
.slides {
 overflow: hidden;
 position: relative;
 width: 500px;
 height: 500px;
}

/* Set position Absolute and position it outside(right) of the .slides */
/* Apply 0.5 secs transition property*/
.mySlides {
 position: absolute;
 right: -500px;  /* same as width for .slides */
 transition: right 0.5s;
}

/* When .active is added it overrides right position on mySlides 
triggering the transition */
.slides .active {
 right: 0;
}

/* Add the active class to the selected mySlides to trigger transition */
l[slideIndex - 1].classList.add("active");

/* Set the overflow on slides class to hidden.*/
/* Position relative to allow absolute positioning on mySlides */
.slides {
 overflow: hidden;
 position: relative;
 width: 500px;
 height: 500px;
}

/* Set position Absolute and position it outside(right) of the .slides */
/* Apply 0.5 secs transition property*/
.mySlides {
 position: absolute;
 right: -500px;  /* same as width for .slides */
 transition: right 0.5s;
}

/* When .active is added it overrides right position on mySlides 
triggering the transition */
.slides .active {
 right: 0;
}

/* Add the active class to the selected mySlides to trigger transition */
l[slideIndex - 1].classList.add("active");