我正在尝试在页面中放置轮播,并且[this page] [1]下面的代码非常适合页面中的一个轮播,但是当我尝试在页面中放置两个轮播时,它不起作用。
由于我是jQuery的初学者,所以我不知道该如何使其工作。有谁知道我如何使它工作?
$(function() {
var carousel = $('.carousel ul');
var carouselChild = carousel.find('li');
var clickCount = 0;
itemWidth = carousel.find('li:first').width() + 1; //Including margin
//Set Carousel width so it won't wrap
carousel.width(itemWidth * carouselChild.length);
//Place the child elements to their original locations.
refreshChildPosition();
//Set the event handlers for buttons.
$('.btnNext').click(function() {
clickCount++;
//Animate the slider to left as item width
carousel.finish().animate({
left: '-=' + itemWidth
}, 300, function() {
//Find the first item and append it as the last item.
lastItem = carousel.find('li:first');
lastItem.remove().appendTo(carousel);
lastItem.css('left', ((carouselChild.length - 1) * (itemWidth)) + (clickCount * itemWidth));
});
});
$('.btnPrevious').click(function() {
clickCount--;
//Find the first item and append it as the last item.
lastItem = carousel.find('li:last');
lastItem.remove().prependTo(carousel);
lastItem.css('left', itemWidth * clickCount);
//Animate the slider to right as item width
carousel.finish().animate({
left: '+=' + itemWidth
}, 300);
});
function refreshChildPosition() {
carouselChild.each(function() {
$(this).css('left', itemWidth * carouselChild.index($(this)));
});
}
function refreshChildPositionNext() {
carouselChild.each(function() {
leftVal = parseInt($(this).css('left'));
});
}
});
.carousel {
padding-top: 20px;
width: 357px;
overflow: hidden;
height: 50px;
position: relative;
}
.carousel ul {
position: relative;
list-style: none;
list-style-type: none;
margin: 0;
height: 50px;
padding: 0;
}
.carousel ul li {
position: absolute;
height: 25px;
width: 50px;
float: left;
margin-right: 1px;
background: #f2f2f2;
text-align: center;
padding-top: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="javascript:void(0);" class="btnPrevious">Previous</a>
<a href="javascript:void(0);" class="btnNext">Next</a>
<div class="carousel">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
</div>
答案 0 :(得分:2)
问题是因为选择器的工作方式将选择所有.carousel
个实例,无论有多少实例。要解决此问题,您需要遍历每个实例,然后使用DOM遍历来查找仅适用于该特定轮播的相关元素。
将其转换为jQuery扩展也很有意义,您可以调用包含轮播的元素,如下所示:
$(function() {
$.fn.carousel = function() {
$(this).each(function() {
var $container = $(this);
var $carousel = $container.find('.carousel ul');
var $carouselChild = $carousel.find('li');
var $prev = $container.find('.btnPrevious');
var $next = $container.find('.btnNext');
var clickCount = 0;
itemWidth = $carousel.find('li:first').width() + 1;
$carousel.width(itemWidth * $carouselChild.length);
refreshChildPosition();
$next.click(function() {
clickCount++;
$carousel.finish().animate({
left: '-=' + itemWidth
}, 300, function() {
lastItem = $carousel.find('li:first');
lastItem.remove().appendTo($carousel);
lastItem.css('left', (($carouselChild.length - 1) * (itemWidth)) + (clickCount * itemWidth));
});
});
$prev.click(function() {
clickCount--;
lastItem = $carousel.find('li:last');
lastItem.remove().prependTo($carousel);
lastItem.css('left', itemWidth * clickCount);
$carousel.finish().animate({
left: '+=' + itemWidth
}, 300);
});
function refreshChildPosition() {
$carouselChild.each(function() {
$(this).css('left', itemWidth * $carouselChild.index($(this)));
});
}
function refreshChildPositionNext() {
$carouselChild.each(function() {
leftVal = parseInt($(this).css('left'));
});
}
});
}
$('.carousel-container').carousel();
});
.carousel {
padding-top: 20px;
width: 357px;
overflow: hidden;
height: 50px;
position: relative;
}
.carousel ul {
position: relative;
list-style: none;
list-style-type: none;
margin: 0;
height: 50px;
padding: 0;
}
.carousel ul li {
position: absolute;
height: 25px;
width: 50px;
float: left;
margin-right: 1px;
background: #f2f2f2;
text-align: center;
padding-top: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="carousel-container">
<a href="#" class="btnPrevious">Previous</a>
<a href="#" class="btnNext">Next</a>
<div class="carousel">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
</div>
</div>
<div class="carousel-container">
<a href="#" class="btnPrevious">Previous</a>
<a href="#" class="btnNext">Next</a>
<div class="carousel">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
</div>
</div>