正在寻找带有就地AJAX刷新的jQuery Carousel插件

我正在寻找一个类似于你在亚马逊主页上看到的插件。滚动到底部，查看旋转木马的实际工作方式。请注意，当您单击right或left时，您会得到一个AJAX刷新（而不是大多数carousel插件所做的全部图片幻灯片）

所以我一直在寻找一个基于jQuery的插件来实现这一点我见过几个jQuery carousel插件，但它们都有幻灯片效果。这不是我想要的。我想像在Amazon上一样执行就地AJAX刷新操作

---

所以希望能节省我一些搜索时间，这里有没有人见过这样做的jquerycarousel插件？当你点击右键或左键时，它会执行一个AJAX调用，并且能够像这样显示中间处理的动画gif？

我没有找到任何东西，但是写一些东西应该不会太难

使用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}

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 );
}

编写一些javascript请求并呈现如下结果

{"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}

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>

这花了大约10分钟，但你应该有希望能够填补空白，做出你想要的。一旦您开始使用live页面，#jQuery irc.freenode.net将能够进一步帮助您。如果你愿意与他们一起工作，他们通常会很有帮助