從頭開始製作jquery傳送帶

我知道這裏有很多關於jquery圖像傳送帶的問題，但它們都是指插件。我想從頭開始。這是一個非常簡單的，有2個按鈕，一個左邊和一個右邊。當你點擊左鍵時，包含所有圖像的整個容器的位置向左移動，右移使其向右移動。從頭開始製作jquery傳送帶

這是我迄今爲止...現在的問題只是左鍵作品。（只有一次將圖像向左滑動圖像時，右按鈕才起作用）並且我還希望它在所有圖像上都有動畫，當您到達圖像集合的末尾時轉到最後一張圖像

JS ：

total_entries = $("image-entry").length; 
var current_index = 0; 
var slider_entries = $('#slider-entries'); 

$('#home-slider #left').click(function(){ 
    go_to_index(current_index-1); 
    return false; 
}); 

$('#home-slider #right').click(function(){ 
    go_to_index(current_index+1); 
    return false; 
}); 



var go_to_index = function(index){ 
    if(index < 0) 
     index = total_entries - 1; 
    if(index > total_entries - 1) 
     index = 0; 
    if(current_index == index) 
     return; 



    var left_offset = -1 * index * 720; 
    slider_entries.stop().animate({"left": left_offset}, 250); 
    //description_container.stop().animate({"left":left_offset}, 250); 
    current_index = index; 
};

HTML：

<div id="slider"> 
    <div id="slider-entries"> 
     <div class="image-entry"> 
      <img src="http://placekitten.com/720/230" /> 
     </div> 
     <div class="image-entry"> 
      <img src="http://placedog.com/720/230" /> 
     </div> 
     <div class="image-entry"> 
      <img src="http://placedog.com/720/230" /> 
     </div> 
    </div> 
</div>

每個圖像的總寬度是720像素總與滑塊條目是

由於

來源

2011-04-23 Bill

您對total_entries變量有問題。首先你需要一個前面的「var」來定義它是一個新的變量。二，你忘了「。」（點）來搜索您的HTML代碼的類..

你的第一行應該是：

var total_entries = $(".image-entry").length;

希望工程;-)

來源

2011-04-23 15:12:17 Simon

稀釋是它的工作謝謝:)我不不知道我怎麼會錯過這個。有時它只是需要第二套眼睛 – Bill 2011-04-23 15:14:54

知道這種感覺 - 上週花費差不多半天的時間讓我的腳本在IE中工作，因爲我忘記了那些對於javascript在IE中工作至關重要的「var」;-) – Simon 2011-04-23 15:17:05

從頭開始製作jquery傳送帶

回答

相關問題