5

我创建了一个以一张图片结尾的图片滑块，但现在我想更进一步，让它循环播放。

这是我在 head 标签中的代码

<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>

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

4

8 回答 8

3

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

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

尝试像这样重写您的代码。它使修改您循环播放的图片变得更加容易：

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尝试一下

编辑

在仔细阅读您的问题后，我发现我的原始答案并没有完全满足您的需求。您已将其设置为每五秒，一个会淡出，另一个会淡入。目前，我的需要 6.5 秒，因为我的都是按顺序运行而不是同时运行。要使其接近匹配您的，只需将 1500 更改为 750：

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

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

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

或者，制作一个非常小的淡入淡出，以帮助减少新图像的闪烁：

    $("#" + 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->fadeIn and Out”而不是“fade in -> show -> fade out”。为了让你的过渡平滑，我只将它淡出到 0.2 而不是 0。step 函数是同时淡入另一个函数。一旦新照片可见，我就完全隐藏了旧照片。

这是它的工作小提琴。

于 2013-06-17T14:51:55.683 回答
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>
于 2013-06-17T14:33:12.123 回答
2 
$(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);
}
于 2013-06-17T14:34:52.993 回答
2

更好的方法是给每个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);});
}

工作演示（带 DIVS）

于 2013-06-17T14:46:10.987 回答
1

如果你想完全控制你的元素，你可以使用这个：

 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 如果您需要较少的配置，答案也很好

于 2013-06-17T14:55:08.863 回答
0

使用任何一个 -

setInterval() - 以指定的时间间隔一遍又一遍地执行一个函数

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

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

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

setInterval 和 setTimeout 有什么区别

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

于 2013-06-17T14:37:24.570 回答
0

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

$(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);

});

于 2013-06-17T14:54:39.320 回答
0

这里真的没有必要，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 示例

于 2013-06-17T15:18:52.607 回答