Question

我正在寻找与您在亚马逊主页上看到的类似的插件。滚动到底部并查看轮播实际上是如何工作的。请注意，当您向右或向左单击时，您将获得AJAX刷新（而不是整个幻灯片插件所执行的整张幻灯片）。

所以我一直在寻找一个基于jQuery的插件来做到这一点。 我看过几个jQuery轮播插件，但它们都有滑动效果。 这不是我想要的。我想在亚马逊上进行适当的AJAX刷新操作。

所以希望能节省一些时间搜索，有没有人在这里看过这样做的jQuery轮播插件？当你向右或向左单击时，它会进行一次AJAX调用并且能够像这样显示中间处理动画gif吗？

Answer 1

我没有找到任何东西，但写东西不应该太难。

使用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将能够为您提供进一步的帮助。如果您愿意与他们合作，他们通常会非常有帮助。

寻找一个带有AJAX刷新的jQuery Carousel插件

1 个答案: