我目前正在用 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>
这是萤火虫的输出:
<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 花了将近一天的时间,却一无所获!任何帮助将不胜感激
干杯,丹