2014-04-14 224 views
0

我試圖使用jQuery實現基本的滑動功能,請找到下面的代碼:滑塊jQuery的不工作

HTML:

<div class="dashboard-crousel" id="spanCarousel"> 
    <span>My Order</span> 
    <span class="selected">Recommendations</span> 
    <span>My Profile</span> 
    <div id="controls"> 
     <a href="javascript:void(0);" class="dashboard-crouselLeftArrow"></a> 
     <a href="javascript:void(0);" class="dashboard-crouselRightArrow"></a> 
    </div> 
</div> 

的Javascript:

<script> 
var slider = { 
    length: parseInt($("#spanCarousel").children("span").length), 
    current: 1, 
    width: $("#spanCarousel").width(), 
    next: function(){ 
     if(this.current < this.length){ 
      this.current = this.current + 1; 
      this.animation(); 
     } else { 
      this.current = 1; 
      this.animation(); 
     } 
    }, 
    animation: function(){ 
     var target = (0 - this.width) * (this.current - 1); 
     this.run("#spanCarousel", target); 

    }, 
    prev: function(){ 

     if(this.current > 1){ 
      this.current = this.current - 1; 
      this.animation(); 
     } else { 
      this.current = this.length; 
      this.animation(); 
     } 
    }, 
    run: function(part, target){ 
     $(part + " .pan").stop().animate(
      {"margin-left": target}, 
      1000 
     ); 
    }, 
    initialize: function(){ 
     $("#controls .dashboard-crouselLeftArrow").click(function(){slider.next();}); 
     $("#controls .dashboard-crouselRightArrow").click(function(){slider.prev();}); 
    } 
} 

slider.initialize(); 
</script> 

enter image description here

我只想在圖像中顯示的箭頭之間滑動內容。

我想從左向右移動文字層出不窮。請幫助

+0

問題是什麼? –

+0

它不工作... – Anubhav

回答

1

我在代碼中看到兩個錯誤。但因爲我沒有你的CSS我不能讓你成爲一個工作例子,並嘗試。

功能parseInttwo parameters,字符串和基數。但是,你永遠不會放第二個參數。

第二個分號在程序的最後沒有找到。

initialize: function(){ 
    $("#controls .dashboard-crouselLeftArrow").click(function(){slider.next();}); 
    $("#controls .dashboard-crouselRightArrow").click(function(){slider.prev();}); 
}}; 

你可以使用JSFiddle到debbug你未來的代碼,它是一個非常有效的工具。