Javascript 如何在html中添加平滑幻灯片

我对HTML、CSS和JavaScript都是新手。我想使用jQuery的javascript在网站中添加平滑的幻灯片。目前我的代码是这样的。我不知道如何使用jQuery

<div class="col-md-6">
    <div class="story_image wow slideInLeft" data-wow-duration="2s">
         <img src="images/1.jpg" alt="" class="mySlides">
         <img src="images/2.jpg" alt="" class="mySlides">
         <img src="images/3.jpg" alt="" class="mySlides">
         <img src="images/4.jpg" alt="" class="mySlides">
         <img src="images/5.jpg" alt="" class="mySlides">
    </div>
</div>

我像这样使用JavaScript

    var myIndex = 0;
    carousel();

    function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 3000); // Change image every 2 seconds
}

var myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
对于（i=0；ix.length）{myIndex=1}
x[myIndex-1].style.display=“block”；
setTimeout（carousel，3000）；//每2秒更改一次图像
}

您可以改为使用

不透明度

，并使用CSS转换使其平滑。尽管这需要绝对定位图像，然后父对象将不再匹配图像的高度，因此您可以设置容器高度以匹配当前图像，并进行转换

var myIndex=0，
container=document.getElementsByClassName（'story_image'）[0]；
转盘（）；
函数旋转木马（）{
var i，
埃尔，
x=document.getElementsByClassName（“mySlides”）；
对于（i=0；ix.length）{
myIndex=1
}
el=x[myIndex-1]；
container.style.height=el.height+'px'；
setTimeout（函数（）{
el.style.opacity=“1”；
设置超时（旋转木马，3000）；
},500);
}

.story\u图像{
位置：相对位置；
过渡：高度5s；
背景：#eee；
}
迈斯利德斯先生{
位置：绝对位置；
顶部：0；左侧：0；
转变：不透明度。5s；
}

---

问题中的代码已经起作用，如添加到问题中的代码所示。
这就是你问题中的javascript，当我去寻找它不起作用的原因时

var myIndex = 0;
    carousel();

    function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 3000); // Change image every 2 seconds
}

var myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
对于（i=0；ix.length）{myIndex=1}
x[myIndex-1].style.display=“block”；
setTimeout（carousel，3000）；//每2秒更改一次图像
}

而且效果很好

如果您想重构代码，或者寻找更健壮的特性，我建议您阅读由开发的carousel.js，或者使用