简单JavaScript幻灯片演示疑难解答_Javascript_Jquery

简单JavaScript幻灯片演示疑难解答

javascript jquery

简单JavaScript幻灯片演示疑难解答,javascript,jquery,Javascript,Jquery,我遇到了一个问题，我的幻灯片在5张幻灯片中的第2张之后被卡住了，理想情况下，我想循环幻灯片，我想知道是否有人可以帮助解决这个问题。代码如下所示： slideshow.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/slideshow.css"> <titl

我遇到了一个问题，我的幻灯片在5张幻灯片中的第2张之后被卡住了，理想情况下，我想循环幻灯片，我想知道是否有人可以帮助解决这个问题。代码如下所示：

slideshow.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/slideshow.css">
    <title>CS98SI Homework 1 - Slideshow</title>
</head>
<body>
    <h1>Slideshow</h1>
    <div class="slideshow">
        <img src="img/kitten_1.jpg">
        <img src="img/kitten_2.jpg">
        <img src="img/kitten_3.jpg">
        <img src="img/kitten_4.jpg">
        <img src="img/kitten_5.jpg">
    </div>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/slideshow.js"></script>
</body>
</html>

要点可在此处找到：

多谢

请发布有问题的实际代码本身，而不仅仅是外部链接。在jsfiddle.net或其他代码沙盒中进行演示总是一个额外的好处，这样其他人就可以使用它了

var createSlideshow = function(slideshowElem, duration) {
    // TODO: Implement createSlideshow.
    if(!duration){
        duration = 5000;
    }
    slideshowElem.children('img').hide();
    var i = 1;
    var anchor = slideshowElem.children('img').first();
    anchor.fadeIn();

    function fades(n){
        anchor.fadeOut('slow',function(){
            $(this).next().fadeIn('slow');
        });
        anchor = anchor.next();
    }
    setInterval(fades(i),duration);
};

$(document).ready(function() {
    // TODO: Use createSlideshow to create a slideshow on the page.
    createSlideshow($('.slideshow'),500000);
});

function createSlideshow(slideshowElem, duration) {

  $(slideshowElem).each(function(){
    var pause = duration||5000;
    var img = $(this).find('img'); // all of them!
    var n = img.length;     // how many images we have
    var i = 0;

    img.css({position:"absolute"}).hide(); // hide all but first one (index 0)

    function fades(){
        img.delay(pause).fadeOut(800).eq(i++%n).stop().fadeIn(800, fades);
    }
    fades();
  });

}

$(document).ready(function() {
    createSlideshow('.slideshow', 3000);
});