如何使我的腳本循環

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 嘗試一下

編輯

在仔細閱讀你的問題時，我發現我原來的答案並沒有完全符合你的需要。 你已經設置好每隔五秒，一個將逐漸消失，另一個將逐漸消失。目前，我的需要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-> fadeIn and Out”而不是“淡入 - >顯示 - >淡出”。 為了使你的過渡平滑，我只將其淡化為0.2而不是0.階梯函數同時淡化另一個。 一旦新的圖片可見，我就完全隱藏了舊圖片。

這是它的工作小提琴。

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);});
}

工作演示（有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);

setInterval和setTimeout之間有什么區別

因為你可能是setTimeout將無法工作，因為它將在延遲后只運行一次，並且setInterval將繼續進行連續重復調用，直到調用window.clearInterval(intervalVariable)

Answer 7

我在這里創建了一個關於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);

}）;

Answer 8

這里真的不需要setInterval ，因為你可以使用內置的.fadeOut()回調.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例子