Question

我创建了一个以一个图像结束的图像滑块，但现在我想更进一步让它循环。

这是头标记中的代码

<style>
#picOne, #picTwo, #picThree, #picFour, #picFive{
position:absolute;
display: none;
}

#pics {
width:500px;
height:332px;
}
</style>

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() { 
    $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picTwo').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picThree').delay(10000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picFour').delay(15000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picFive').delay(20000).fadeIn(1500).delay(3500);
});
</script>

，这是在正文代码中实现的地方

<div id="pics">
<center>
<img src="img/dolllay.jpg" width="500" height="332" id="picFive" />
<img src="img/dye.jpg" width="500" height="332" id="picTwo" />
<img src="img/dollsit.jpg" width="500" height="332" id="picThree" />
<img src="img/heirloom.jpg" width="500" height="332" id="picFour" />
<img src="img/heritage.jpg" width="500" height="332" id="picOne" />
</center>
</div>

我可以把它变成一个函数然后循环吗？我可以得到任何指导吗？非常感谢你

Answer 1

每个人都在回答这个问题，但没有解决问题。

当然，你可以在它周围放一个循环包装器（最好是一个不会终止的包装器），但为什么不直接编程呢？为什么要进行所有硬编码时间，以及为什么不使它更强大？

尝试重写这样的代码。它可以更容易地修改你循环的图片：

var pictures = ["picOne", "picTwo", "picThree", "picFour", "picFive"];
var index = 0;

var displayImage = function() {
    if (index == pictures.length) { return; }

    $("#" + pictures[index++]).fadeIn(1500).delay(3500).fadeOut(1500, displayImage);
};

displayImage();

然后，如果你想循环回来，你只需调整displayImage函数：

var displayImage = function() {
    if (index == pictures.length) { index = 0; }
    $("#" + pictures[index++]).fadeIn(1500).delay(3500).fadeOut(1500, displayImage);
};

在jsfiddle

TRY IT

修改

在仔细阅读您的问题时，我发现我原来的答案并没有完全符合您的要求。你已经设置好每隔五秒，一个将逐渐消失，另一个将逐渐消失。目前，我的需要6.5秒，因为我的所有操作都按顺序而不是同时操作。为了使它与您的匹配，只需将1500s更改为750s：

    $("#" + pictures[index++]).fadeIn(750).delay(3500).fadeOut(750, displayImage);

这将花费适当的时间。它与你的略有不同，因为在另一个淡入之前，它会一直淡出。另一种方法是实际跳过fadeIn并保持淡出。这与你的外表更接近。

    $("#" + pictures[index++]).show().delay(3500).fadeOut(1500, displayImage);

或者，制作一个非常小的fadein，以帮助减少新图像的闪光：

    $("#" + pictures[index++]).fadeIn(100).delay(3500).fadeOut(1400, displayImage);

最终编辑（真的！）

好的，为了使fadeIn和fadeOut同时可靠地工作，解决方案是不使用。我回去使用animate。因此，我必须完全重写displayImage函数，但这正是您所需要的：

var displayImage = function () {
    if (index == pictures.length) {
        index = 0;
    }

    $("#" + pictures[index]).show().delay(3500).animate({
        opacity: 0.2
    }, {
        step: function (now) {
            var idx = (index + 1) % pictures.length;
            var val = 1.2 - now;
            $("#" + pictures[idx]).show().css("opacity", val);
        },
        complete: function () {
            $("#" + pictures[index++]).hide();
            displayImage();
        }
    });
};

这样做是将序列移动到“show-＆gt; fadeIn and Out”而不是“fade in - ＆gt; show - ＆gt; fade out”。为了使你的过渡平滑，我只将其淡化为0.2而不是0.阶梯函数同时淡化另一个。一旦新的图片可见，我就完全隐藏旧图片。

Here是工作的小提琴。

Answer 2

您可以使用setInterval永久循环播放，或setTimeout将其循环播放一段时间。

<script type="text/javascript">

$(document).ready(function() { 
     setInterval(ImageSlider, 1000);
});

 function ImageSlider() {
    $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picTwo').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picThree').delay(10000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picFour').delay(15000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picFive').delay(20000).fadeIn(1500).delay(3500);
 }

</script>

Answer 3

$(document).ready(function() { 
   setInterval(example, 10000); // repeat every 10 seconds
});

function example() {
    $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picTwo').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picThree').delay(10000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picFour').delay(15000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picFive').delay(20000).fadeIn(1500).delay(3500);
}

Answer 4

更好的方法是给每个pic相同的类，例如'fadeinout'。这意味着您在添加/删除更多图片时不必重新编写代码。

例如

<img id="picFive" class="fadeinout" ....  
/* not sure if they are even <img>s but whatever they are*/

然后做

$(document).ready(function() { 
    beginFades();
});

function beginFades() {
    $('.fadeinout').each( function(i,el) {  // find all elements with fadeinout
        //for each one, trigger the start of the fading after i*5000 milliseconds
        //i is the index of the element as it was found by jQuery - this will be in
        //document order (which actually may not be what you have but I'm guessing        
        //it is)
        setTimeout(function(){
            makeImgFadeInOut($(el))
        }, i*5000);
    });
}


function makeImgFadeInOut(el) {
    //trigger a single fadeIn, fadeOut.
    //But add a callback function to the end of fadeOut which retriggers the whole        
    //thing
    el.fadeIn(1500).delay(3500).fadeOut(1500, function(){makeImgFadeInOut(el);});
}

WORKING DEMO (WITH DIVS)

Answer 5

如果您想完全控制元素，可以使用：

 var elements = [{
   el: '#pic1',
   delay: 3500,
   fadeIn: 1500,
   fadeOut: 1500
},
{
  el: '#pic2',
  delay: 3500,
  fadeIn: 1500,
  fadeOut: 1500
 }
 //... other elements
]
var index = null;
(function loop(){
  index = index || 0;
  index = index % elements.length();
      $(elements[index].el).fadeIn(elements[index].fadeIn, function(){
      $(this).delay(elements[index].delay)
             .fadeOut(elements[index].fadeOut, function(){
                  index++;
                  window.setTimeout(loop, 5000);
              });
   })();

编辑：忘记执行循环函数的第一次迭代并删除循环中无用的索引调用

这个循环如何工作的好处是它不使用SetInterval函数。并且循环内部的代码需要在再次迭代之前完成它内部的操作。（如果你点击另一个标签然后回到你的旋转木马，你将不会有这个可怕的错误）如果您需要更少的配置，@ ElRoconno答案也很不错

Answer 6

使用以下任何一项 -

setInterval（） - 以指定的时间间隔反复执行一个函数

setInterval(function(){alert("Hello")},3000);

setTimeout（） - 在等待指定的毫秒数后执行一次函数。

setTimeout(function(){alert("Hello")},3000);

What is the difference between both setInterval and setTimeout

因为你可能是setTimeout不会工作，因为它只会在延迟后运行一次，并且setInterval将继续进行连续重复调用，直到调用window.clearInterval(intervalVariable)

Answer 7

我在jsfiddler here上创建了一个示例。基本上你不必一次做这个。只需将整个图像集合作为一个数组并循环遍历它们。希望这有帮助

$(document).ready(function () {
var arr = $('.pics')
arr.hide();

$(arr[0]).fadeIn(1500).delay(3500).fadeOut(1500);

var index = 1;
var maxIndex = arr.length - 1;

setInterval(function () {
    /*arr.hide();
     var pic = $(arr[index]);
     pic.show();
     */
    var pic = $(arr[index]);
    pic.fadeIn(1500).delay(3500).fadeOut(1500);


    index++;
    if (index >= maxIndex) {
        index = 0;
    }
}, 6500);

}）;

Answer 8

这里真的不需要setInterval，因为您可以使用内置于.fadeOut()的回调，也不必枚举图像数组。你可以做一些简单的事情：

var idx = 0;
fade();
function fade() {
    if (idx >= $('img').length) idx = 0;
    $('img').eq(idx).fadeIn(1500).delay(3500).fadeOut(1500, fade);
    idx++;
}

<强> jsFiddle example

如何使我的脚本循环

8 个答案:

修改

最终编辑（真的！）