单个页面上的这个轮播的多个实例 – 无法使其工作

这段代码来自一个教程，所以它最初不是我自己的工作。我想要做的是在一个页面上多次实现。我试过并且到目前为止失败了 – 通过编号id“carousel”等等。任何帮助将得到认真的赞赏。我正在撕扯我的头发。

http://jsfiddle.net/AndyMP/zcKDV/5/

为了完整性..这是现在的旋转木马JQuery。

//rotation speed and timer var speed = 5000; var run = setInterval('rotate()', speed); //grab the width and calculate left value var item_width = $('#slides li').outerWidth(); var left_value = item_width * (-1); //move the last item before first item, just in case user click prev button $('#slides li:first').before($('#slides li:last')); //set the default item to the correct position $('#slides ul').css({'left' : left_value}); //if user clicked on prev button $('#prev').click(function() { //get the right position var left_indent = parseInt($('#slides ul').css('left')) + item_width; //slide the item $('#slides ul').animate({'left' : left_indent}, 200,function(){ //move the last item and put it as first item $('#slides li:first').before($('#slides li:last')); //set the default item to correct position $('#slides ul').css({'left' : left_value}); }); //cancel the link behavior return false; }); //if user clicked on next button $('#next').click(function() { //get the right position var left_indent = parseInt($('#slides ul').css('left')) - item_width; //slide the item $('#slides ul').animate({'left' : left_indent}, 200, function () { //move the first item and put it as last item $('#slides li:last').after($('#slides li:first')); //set the default item to correct position $('#slides ul').css({'left' : left_value}); }); //cancel the link behavior return false; }); //if mouse hover, pause the auto rotation, otherwise rotate it $('#slides').hover( function() { clearInterval(run); }, function() { run = setInterval('rotate()', speed); } ); //a simple function to click next link //a timer will call this function, and the rotation will begin :) function rotate() { $('#next').click(); }

当我复制代码，CSS和HTML，我工作多个。你可以看看这个。（有一些CSS问题，但它的工作原理）

http://jsfiddle.net/serkanalgur/mWe4c/

Hiya请使用Jcarousal Working Demo试试这个： http ： //jsfiddle.net/Znztg/

希望这可以帮助！并适用于多个carousal以减少代码。干杯

http://sorgalla.com/projects/jcarousel/如果你热衷于更多阅读！

图书馆

JQuery代码

 $(document).ready(function() { // Initialise the first and second carousel by class selector. // Note that they use both the same configuration options (none in this case). $('.first-and-second-carousel').jcarousel(); // If you want to use a caoursel with different configuration options, // you have to initialise it seperately. // We do it by an id selector here. $('#third-carousel').jcarousel(); // alert('foo'); });

HTML

    jCarousel
 Riding carousels with jQuery
 Multiple carousels on one page
  This example shows how to use multiple carousels on one page with different skins and configurations.