Question

在图像滑动完成后，它会继续向右滑动，我尝试了一个setTimeout将图像向左移动，以便重新启动，然后setInterval动画停止。有没有办法将#slidewindow向左移动400％，以便幻灯片可以从头开始重新创建无限循环？

非常感谢您的贡献！

HTML：

<div id="slide-box">
        <div id="slidewindow">
            <div id="Img1">
                <img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
            </div>

            <div id="Img2">
                <img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
            </div>

            <div id="Img3">
                <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
            </div>

            <div id="Img4">
                <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
            </div>

            <div id="Img5">
                <img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
            </div>

        </div>
    </div>

CSS：

#slide-box{
    width: 80%;
    border: solid;
    border-color: white;
    border-width: 1rem;
    background-color: yellow;
    display: inline-block;
    overflow: hidden;

}

#slidewindow{
    float: left;
    width: 500%;
    margin: 0;
    position: relative;

}

.imgs{
    width: 20%;
    float: left;
    margin: 0 0 0 0;
}

JQUERY：

setInterval(function(){ 
        $('#slidewindow').animate({
            right:'+=100%',

            }, 1000);
    }, 2000);

Answer 1

如果您在动画后恢复动画right属性，然后将第一张图片移动到列表的末尾，则会获得一个持续的幻灯片放映：

setInterval(function(){
    $('#slidewindow').animate({
        right:'+=100%',
    }, 1000, function () { // Add this callback function
        // Reinject the first image at the end, and set "right" back to 0 
        $('#slidewindow').append($('#slidewindow>div:first')).css({ right: 0 });
    });
}, 2000);

#slide-box{
    width: 80%;
    border: solid;
    border-color: white;
    border-width: 1rem;
    background-color: yellow;
    display: inline-block;
    overflow: hidden;

}

#slidewindow{
    float: left;
    width: 500%;
    margin: 0;
    position: relative;

}

.imgs{
    width: 20%;
    float: left;
    margin: 0 0 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide-box">
        <div id="slidewindow">
            <div id="Img1">
                <img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
            </div>

            <div id="Img2">
                <img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
            </div>

            <div id="Img3">
                <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
            </div>

            <div id="Img4">
                <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
            </div>

            <div id="Img5">
                <img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
            </div>

        </div>
    </div>

Answer 2

这是我的版本，它更通用，请尝试在您的代码中使用它！

var right = 0;
setInterval(function() {
  //determine the right position minus the width of one image. 
  right = parseInt($('#slidewindow').css("right")) + $('.imgs').width();
  //check if the right position has reach the end, i.e width of the slidewindow
  if (right === $('#slidewindow').width()) {
    //if the end is reached you can use the below line to directly send it to the first image.
    //$('#slidewindow').css("right", "0px");
    //or
    //if you want to animate the return to the first line, use the below JS
    $('#slidewindow').animate({
      right: '0'
    }, 1000);
  } else {
    //since we have not reached the end of the width, increase the slide
    $('#slidewindow').animate({
      right: '+=100%'
    }, 1000);
  }
  //on each interval, add the width of the slide that was moved to the right variable!
  right += parseInt($('#slidewindow').css("right"));
}, 2000);

#slide-box {
  width: 80%;
  border: solid;
  border-color: white;
  border-width: 1rem;
  background-color: yellow;
  display: inline-block;
  overflow: hidden;
}

#slidewindow {
  float: left;
  width: 500%;
  margin: 0;
  position: relative;
}

.imgs {
  width: 20%;
  float: left;
  margin: 0 0 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide-box">
  <div id="slidewindow">
    <div id="Img1">
      <img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
    </div>

    <div id="Img2">
      <img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
    </div>

    <div id="Img3">
      <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
    </div>

    <div id="Img4">
      <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
    </div>

    <div id="Img5">
      <img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
    </div>

  </div>
</div>

Answer 3

你可以使用全球反击......

var counter = 0;
setInterval(function(){
    if(counter == 3)
    {
        $('#slidewindow').animate({
            right:'-=300%',
        }, 1000);
        counter = 0;
    }
    else
    {
        $('#slidewindow').animate({
            right:'+=100%',
        }, 1000);
        counter++;
    }
}, 2000);

#slide-box{
    width: 80%;
    border: solid;
    border-color: white;
    border-width: 1rem;
    background-color: yellow;
    display: inline-block;
    overflow: hidden;

}

#slidewindow{
    float: left;
    width: 500%;
    margin: 0;
    position: relative;

}

.imgs{
    width: 20%;
    float: left;
    margin: 0 0 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide-box">
        <div id="slidewindow">
            <div id="Img1">
                <img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
            </div>

            <div id="Img2">
                <img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
            </div>

            <div id="Img3">
                <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
            </div>

            <div id="Img4">
                <img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
            </div>

            <div id="Img5">
                <img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
            </div>

        </div>
    </div>

在setInterval（）中重复动画？

3 个答案: