jQuery循環滑塊問題

Question

我試圖通過在ul.slider-ul上設置.css({"left" : "0px"})來獲得以下滑塊。我有一個console.log("Loop")去檢查if聲明正在工作，它是。

HTML

<div class="slider-small-box sone slider-box"> 
    <ul class="slider-ul"> 
     <li> 
      <img src="spacer.gif" class="slider-img"> 
     </li> 
     <li> 
      <img src="spacer2.gif" class="slider-img"> 
     </li> 
     <li> 
      <img src="spacer2.gif" class="slider-img"> 
     </li> 
     <li> 
      <img src="spacer2.gif" class="slider-img"> 
     </li> 
    </ul> 
</div> 

CSS

.slider-box { 
    overflow: hidden; 
    position: relative; 
} 
.slider-box ul { 
    padding: 0px; 
    margin: 0px; 
    white-space: nowrap; 
    position: absolute; 
    left: 0px; 
    right: auto; 
} 
.slider-box > ul > li { 
    display: inline-block; 
    border-radius: 5px; 
} 
.slider-small-box > ul > li > img { 
    width: 270px; 
    height: 200px; 
    background-color: #333333; 
    border-radius: 5px; 
} 
.slider-large-box > ul > li > img { 
    width: 550px; 
    height: 200px; 
    background-color: #333333; 
    border-radius: 5px; 
} 

jQuery的

function slider(x) { 

    function loop() { //Sets repeating random value 
     var rand = Math.round(Math.random() * (5000 - 1000)) + 1000; 
     slider(x) 
    } 

    var size = $(x).parent().width() //Getting the size of the viewport div 

    var rand = Math.round(Math.random() * (5000 - 1000)) + 1000; //Sets initial random value 

    setTimeout(function() { //Animating the slider to the left with a random time 
     $(x).animate({"left" : "-=" + size + "px"}, 2000) 
     loop(); 
    }, rand); 

    var width = 0; 
    $(x).find('li').each(function() { //Finding the total width of the images 
     width += $(this).outerWidth(true); 
     return(width) 
    }); 

    var offset = size - width + "px"; //The point at which to reset the slider 

    var pos = $(x).position().left + "px"; //The current left position of the slider 

    var $this = $(this) 
    if(pos == offset) { 
     console.log("Loop"); //This gets called out 
     $this.animate({"left" : "0px"}); //This doesn't set the css value 
    }; 
} 


$(function() { 
    $("ul.slider-ul").each(function() { 
     $this = $(this) 
     slider($this) 
    }); 
}); 

在這裏看到的小提琴：Jsfiddle

編輯：

澄清問題是jQuery底部的if語句。出於某種原因，它不會重置元素的css的left值以創建循環操作。

Answer 1

您錯過了很多';'在JavaScript代碼：

---

編輯

這裏是一個工作代碼：（DEMO JSFiddle）

function slider(x) {  

    var rand = Math.round(Math.random() * (5000 - 1000)) + 1000; 

    // go to left 
    setTimeout(function() { 
     var size = x.parent().width(); 
     var futureLoc = x.offset().left + x.outerWidth(true) - size; 
     var parentLoc = x.parent().offset().left; 
     if (futureLoc <= parentLoc) { 
      console.log("Loop"); 
      x.animate({ 
       "left": "0px" 
      },function(){slider(x);}); 
     } else { 
      x.animate({ 
       "left": "-=" + size + "px" 
      }, 2000,function(){slider(x);}); 
     } 
    }, rand); 
} 


$("ul.slider-ul").each(function() { 
    slider($(this)); 
}); 

我不得不改變很多東西，它重置前的動畫是空的所以你將不得不玩它有一個完美的動畫。

edit2：我更改了代碼以使其重置正確