我目前正在使用bxslider构建一个滑块。我认为一切正常,直到我需要在当前幻灯片中添加活动类。我得到了这个工作正常,但在我的源代码中,我注意到幻灯片重复两次,如果不是3次。我的滑块中只有3张幻灯片。我已将displaySlideQty设置为3并将moveSlideQty设置为1。
问题是活动类是否已添加但未从重复幻灯片中删除。下面是我对bxslider的jquery代码:
$(document).ready(function(){
var slider = $('#slider1').bxSlider({
controls: false,
displaySlideQty: 3,
moveSlideQty: 1,
onBeforeSlide: function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
$('.pager').removeClass('active-slide');
$(currentSlideHtmlObject).next().addClass('active-slide');
// $('#sddf').html('<p class="check">Slide index ' + currentSlide + ' of ' + totalSlides + ' total slides has completed.');
}
这是我的HTML:
<ul id="slider1" style="overflow:hidden; margin:auto;">
<li id="slidel" style="width:960px;">
<?php include('includes/sliders/center.php'); ?>
</li>
<li id="slidec" style="width:960px;">
<?php include('includes/sliders/left.php'); ?>
</li>
<li id="slider" style="width:960px;">
<?php include('includes/sliders/right.php'); ?>
</div>
</ul>
这是firebug中的输出:
<ul id="slider1" style="overflow: hidden; margin: auto; width: 999999px; position: relative; left: -960px;">
<li id="slider" style="width: 960px; float: left; list-style: none outside none;">
<li id="slidel" class="pager" style="width: 960px; float: left; list-style: none outside none;">
<li id="slidec" class="pager active-slide" style="width: 960px; float: left; list-style: none outside none;">
<li id="slider" class="pager" style="width: 960px; float: left; list-style: none outside none;">
<li id="slidel" style="width: 960px; float: left; list-style: none outside none;" class="active-slide">
<li id="slidec" style="width: 960px; float: left; list-style: none outside none;">
<li id="slider" style="width: 960px; float: left; list-style: none outside none;">
</ul>
注意上面有2个活动类。底部不会改变。
iv花了将近一天的时间在这上面并没有到达任何地方!任何帮助将不胜感激干杯,丹