正在尋找一個jQuery Carousel插件AJAX刷新

我正在尋找一個類似的插件，你可以在亞馬遜的主頁上看到。滾動到底部並查看傳送帶實際工作的方式。請注意，當您單擊向右或向左時，您將得到一個AJAX刷新（不是整個幻燈片的圖片，這是大多數輪播插件所做的）。正在尋找一個jQuery Carousel插件AJAX刷新

所以我一直在尋找一個基於jQuery的插件來做到這一點。 我已經看過幾個jQuery輪播插件，但它們都做滑動效果。這不是我要找的。我想要像在亞馬遜上那樣進行AJAX刷新操作。

所以希望能夠節省我一些時間搜索，有沒有人在這裏看到過這樣做的jQuery旋轉木馬插件？當你點擊右鍵或者左鍵時，它會執行一個AJAX調用並且能夠顯示像這樣的中間處理動畫gif？

來源

2009-06-25 PositiveGuy

我沒有找到任何東西，但它不應該太難寫一些東西。

使用PHP，Perl，Python，.NET等，並創建一個返回JSON對象的服務器端腳本。既然你只向jQuery尋求幫助，我假設你知道如何編寫你自己的服務器腳本。以下是您可以使用jQuery執行此操作的一種方法。

返回一個JSON對象，這樣的...

{"items":[{"img":"http://www.png","url":"http://www.html","name":"Item A"}, 
      {"img":"http://www.png","url":"http://www.html","name":"Item B"}, 
      {"img":"http://www.png","url":"http://www.html","name":"Item C"}], 
"collection_id":100}

寫一些JavaScript索要並呈現這樣的結果......

function onGotData(data) 
{ 
    jQuery('#itemA .item_name').text(data.items[0].name); 
    jQuery('#itemA .item_image').attr('src', data.items[0].img); 
    jQuery('#itemA').click(function() { document.location = data.items[0].url }); 
    jQuery('#itemB .item_name').text(data.items[1].name); 
    jQuery('#itemB .item_image').attr('src', data.items[1].img); 
    jQuery('#itemB').click(function() { document.location = data.items[1].url }); 
    jQuery('#itemC .item_name').text(data.items[2].name); 
    jQuery('#itemC .item_image').attr('src', data.items[2].img); 
    jQuery('#itemC').click(function() { document.location = data.items[2].url }); 
    collection_id = data.collection_id; 
} 
var collection_id = 100; 
function getData(direction, id) 
{ 
    // change images to loading animation 
    jQuery('#itemA .item_image').attr('src', 'loading.gif'); 
    jQuery('#itemB .item_image').attr('src', 'loading.gif'); 
    jQuery('#itemC .item_image').attr('src', 'loading.gif'); 
    jQuery.getJSON('http://path.to/yourscript?collection=' + 
      direction + '&id=' + id,null,onGotData); 
}

假設一些HTML像這樣持有多你有許多物品。

<span class="item" id="itemA"> 
    <span class="item_name">Name</span> 
    <img class="item_image" src="loading.gif"></span> 
</span>

然後在最後折騰一些按鈕。

<div id="goLeft"><img src="left.gif"></div> 
<div id="goRight"><img src="right.gif"></div>

然後使按鈕點擊...

jQuery('#goLeft').click(function() { 
    getData('left', collection_id); 
}); 
jQuery('#goRight').click(function() { 
    getData('left', collection_id); 
});

這花了大約10分鐘，但你應該希望能夠填補空白，讓你在找什麼。 #jQuery irc.freenode.net將能夠在您開始在您的實時頁面上工作時爲您提供更多幫助。如果你願意與他們合作，他們通常會非常有幫助。

來源

2009-06-30 04:03:12

正在尋找一個jQuery Carousel插件AJAX刷新

回答

相關問題