jquery循環3項，並通過減少它重複

我想創建一個jQuery函數來增加或減少值每3秒使用windows.interval。jquery循環3項，並通過減少它重複

這裏是當前目標：

第一：1,2,3 3秒後第二：3,1,2 3秒後第三：2,3,1- 3秒後4th：1,2,3

是否有無論如何要實現在jQuery中？

window.setInterval(function() { 
    /// call your function here 

    $('.item-3').css({ 
     'top': '-100px' 
    }); 
    $('.item-1').animate({ 
     top: "100px", 
    }, 1000, function() { 
     // Animation complete. 
    }); 
    $('.item-2').animate({ 
     top: "200px", 
    }, 1000, function() { 
     // Animation complete. 
    }); 
    $('.item-3').animate({ 
     top: "0px", 
    }, 1000, function() { 
     // Animation complete. 
    }); 

}, 5000);

我不能使用追加或預先準備的項目內包含一個閃光對象我不能鬆動的狀態下，如如果使用附加或預先準備，我將不得不reclick內部flash對象div.item-x，這不是我想要的。

謝謝

來源

2016-01-11 Boby

你能提供一些更精確的細節，你到底想要做什麼？ –

它與遞增/遞減有關還是你想設置一些東西像滑塊？根據你的代碼，它看起來你想要設置與滑塊相關的東西。像這樣：http://sorgalla.com/jcarousel/examples/responsive/ 這是你想要設置的相同的東西嗎？ –

我想設置一個半動畫，但不能使用sorgalla jcarousel，因爲元素的內部插入了一個flash對象，當我使用sorgalla時，它不會運行flash，一旦它的循環回到第一個對象，所以我只需要我目前的職能工作。 – Boby

根據您的要求，在這裏我提到了一些代碼。請試試這個：

HTML

<div id="slideshow"> 
       <ul> 
        <li><img src="photo1.jpg" alt="photo1" /></li> 
        <li><img src="photo2.jpg" alt="photo2" /></li> 
        <li><img src="photo3.jpg" alt="photo3" /></li> 
        <li><img src="photo4.jpg" alt="photo4" /></li> 
       </ul> 
      </div>

CSS

#slideshow{ 
        margin:0 auto; 
        height:155px; 
        overflow: hidden; 
        position: relative; 
        width: 465px; 
       } 

       #slideshow ul{ 
        list-style: none; 
        margin:0; 
        padding:0; 
        position: absolute; 
       } 

       #slideshow li{ 
        float:left; 
        padding:2.5px; 
       }

//an image width in pixels 
      var imageWidth = 155; 

      //DOM and all content is loaded 
      $(document).ready(function() { 

       var currentImage = 0; 

      //set image count 
      var allImages = $('#slideshow li').length; 

      //setup slideshow frame width 
      $('#slideshow ul').width(allImages*imageWidth); 

      setInterval(executeSlideShow,3000); 

      function executeSlideShow() 
      { 
       //increase image counter 
       currentImage++; 
       //if we are at the end let set it to 0 
       if(currentImage>=allImages) currentImage = 0; 
       //calcualte and set position 
       setFramePosition(currentImage); 
      } 

     }); 


     //calculate the slideshow frame position and animate it to the new position 
     function setFramePosition(pos){ 

      //calculate position 
      var px = imageWidth*pos*-1; 
      //set ul left position 
      $('#slideshow ul').animate({ 
       left: px 
      }, 300); 
     }

此代碼將不能滿足喲你確切的要求，但是，它會幫助你實現這一點，它也將與你的Flash對象一起工作。在HTML中，您可以用圖像替換您的Flash對象。

希望這會幫助你。

來源

2016-01-12 11:28:59

jquery循環3項，並通過減少它重複

回答

相關問題