私のサイダーコードにスライドショーのアニメーションを追加するには

Question

私は現在私の学校のプロジェクトに取り組んでいます。画像スライドショーがあります。

矢印をクリックすると、次の画像が表示されます。

しかし、スライドして次の画像を表示します。ここで

var slideIndex = 1; 
 
showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("MySlides"); 
 
    if (n > x.length) { 
 
    slideIndex = 1 
 
    } 
 
    if (n < 1) { 
 
    slideIndex = x.length 
 
    } 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    x[slideIndex - 1].style.display = "block"; 
 
}

<img class="MySlides" src="http://lorempixel.com/400/400/sports/" width="380px;" height="380px;"> 
 
<img class="MySlides" src="http://lorempixel.com/400/400/food/" width="380px;" height="380px;" style="display:none;"> 
 
<img class="MySlides" src="http://lorempixel.com/400/400/cats/" width="380px;" height="380px;" style="display:none;"> 
 
<span><a OnClick="plusDivs(1)" class="links">&#8249;</a></span> 
 
<span><a OnClick="plusDivs(-1)"class="rechts">&#8250;</a></span>

Answer 1

実際のスライド効果で、私の解決策である：ここではhttps://codepen.io/anon/pen/XMxGMw

var slideIndex = 0; 
 
showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var slides = document.getElementsByClassName('slide'); 
 
    console.log(slides.length); 
 
    if (n < 0) { 
 
    slideIndex = slides.length - 1; 
 
    n = slides.length - 1; 
 
    } else if (n > slides.length - 1) { 
 
    slideIndex = 0; 
 
    n = 0; 
 
    } 
 
    for (i = 0; i < slides.length; i++) { 
 
    var slide = slides[i]; 
 
    if (i < n) { 
 
     slide.className = 'slide slide-previous'; 
 
    } else if (i === n) { 
 
     slide.className = 'slide slide-selected'; 
 
    } else { 
 
     slide.className = 'slide slide-next'; 
 
    } 
 
    } 
 
}

#slides-container { 
 
    position: relative; 
 
    width: 380px; 
 
    height: 380px; 
 
    overflow: hidden; 
 
} 
 

 
.slide { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 380px; 
 
    width: 380px; 
 
} 
 

 
.slide-selected, 
 
.slide-previous, 
 
.slide-next { 
 
    transition: transform 1s; 
 
} 
 

 
.slide-selected { 
 
    z-index: 2; 
 
    transform: translateX(0); 
 
} 
 

 
.slide-previous { 
 
    z-index: 1; 
 
    transform: translateX(-100%); 
 
} 
 

 
.slide-next { 
 
    z-index: 1; 
 
    transform: translateX(100%); 
 
}

<div id="slides-container"> 
 
    <img class="slide" src="http://lorempixel.com/400/400/sports/"> 
 
    <img class="slide" src="http://lorempixel.com/400/400/food/"> 
 
    <img class="slide" src="http://lorempixel.com/400/400/cats/"> 
 
    <img class="slide" src="http://lorempixel.com/400/400/food/"> 
 
    <img class="slide" src="http://lorempixel.com/400/400/food/"> 
 
</div> 
 
<span><a OnClick="plusDivs(-1)" class="links">&#8249;</a></span> 
 
<span><a OnClick="plusDivs(1)"class="rechts">&#8250;</a></span>

は、自動化と異なるアニメーションで、より高度なバージョンです：https://codepen.io/anon/pen/ryqRKX

Answer 2

$("#slideshow > div:gt(0)").hide(); 
 

 
var index = 1; 
 
var maxindex = $('#slideshow > div').length; 
 

 
setInterval(function() { 
 
    $('#slideshow > div:first') 
 
     .fadeOut(1000) 
 
     .next() 
 
     .fadeIn(1000) 
 
     .end() 
 
     .appendTo('#slideshow'); 
 
    $('ul li').removeClass('active'); 
 
    $('ul li:eq(' + index + ')').addClass('active'); 
 
    index = index < maxindex - 1 ? index + 1 : 0; 
 
}, 3000); 
 

 
for (var i = 0; i < maxindex; i++) { 
 
    $('ul').append('<li class="' + (i == 0 ? 'active' : '') + '"></li>'); 
 
}

#slideshow { 
 
    margin: 50px auto; 
 
    position: relative; 
 
    width: 240px; 
 
    height: 240px; 
 
    padding: 10px; 
 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); 
 
} 
 
#slideshow > div { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
    right: 10px; 
 
    bottom: 10px; 
 
} 
 

 
#slideshow img { 
 
    max-width:240px; 
 
    max-height:240px; 
 
} 
 

 
ul { 
 
    list-style:none; 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 
ul li { 
 
    float:left; 
 
    border-radius:10px; 
 
    width:10px; 
 
    height:10px; 
 
    border:1px solid white; 
 
    background:grey; 
 
} 
 
ul li.active { 
 
    background:black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<body> 
 
<div id="slideshow"> 
 
<div> 
 
<img class="MySlides" src="http://lorempixel.com/400/400/food/" width="380px;" height="380px;"> 
 
</div> 
 
<div> 
 
<img class="MySlides" src="https://www.w3schools.com/css/img_fjords.jpg" width="380px;" height="380px; "> 
 
</div> 
 
<ul></ul> 
 

 
</div> 
 
</body>