问题
This code comes from a tutorial so it's not originally my own work. What I am trying to do is implement this several times on a single page. I have tried and so far failed - by numbering the id "carousel" and so forth. Any help would be seriously appreciated. I'm tearing my hair out.
http://jsfiddle.net/AndyMP/zcKDV/5/
For completeness.. this is the carousel JQuery as it stands.
//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();
}
回答1:
When i duplicate code, css and html and i works multiple. You can look at this. (There is some css issues but it works)
http://jsfiddle.net/serkanalgur/mWe4c/
回答2:
Hiya please try this using Jcarousal Working Demo: http://jsfiddle.net/Znztg/
Hope this helps! and works for multiple carousal for less code. CHeers
http://sorgalla.com/projects/jcarousel/ for more read if you keen!
Library
<!--
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 Code
$(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>
来源：https://stackoverflow.com/questions/10053780/multiple-instances-of-this-carousel-on-a-single-page-cant-get-it-to-work