正在寻找一个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刷新

回答

相关问题