Question

此代码来自一个教程，因此它本来不是我自己的工作。我想要做的是在一个页面上多次实现。我试过并且到目前为止失败了 - 通过编号id“carousel”等等。任何帮助都会受到重视。我正在撕开我的头发。

为了完整性......这是现在的旋转木马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();
}

Answer 1

当我复制代码，css和html，我工作多次。你可以看看这个。（有一些css问题，但它有效）

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

Answer 2

Hiya请使用Jcarousal 工作演示：http://jsfiddle.net/Znztg/

希望这有帮助！并适用于多个carousal以减少代码。欢呼声

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

<强>库

<!--

      jCarousel library
    -->
    <script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js/lib/jquery.jcarousel.min.js"></script>
    <!--
      jCarousel skin stylesheets
    -->
    <link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />
    <link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/ie7/skin.css" />

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

</head>
<body>
<div id="wrap">
  <h1>jCarousel</h1>
  <h2>Riding carousels with jQuery</h2>

  <h3>Multiple carousels on one page</h3>
  <p>
    This example shows how to use multiple carousels on one page with different
        skins and configurations.
  </p>

  <ul id="first-carousel" class="first-and-second-carousel jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>

  <hr size="1"/>

  <ul id="second-carousel" class="first-and-second-carousel jcarousel-skin-ie7">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>

  <hr size="1"/>

  <ul id="third-carousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>

</div>
</body>

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

2 个答案: