Question

我真的是在解决这个问题。我在bxslider中有5张幻灯片，我试图在页面上的5张幻灯片中的第3张幻灯片上有一个活动类，当幻灯片第一次加载时它会...当我第一次点击下一个按钮时活动类不会转到下一个元素。它保持在当前幻灯片上，然后第二次移动到下一张幻灯片我点击下一步按钮。所以我认为next（）函数不起作用。或者是我做错了什么？

jQuery(function($){
	
var slider = $('.bxslider').bxSlider({
 minSlides: 1,
  moveSlides:1,
  maxSlides: 5,
   pager:false,
  controls:false,
  slideWidth: 360,
  slideMargin: 0,
    onSlideBefore : function($slideElement, oldIndex, newIndex){ // your code here 

$(".bxslider li").removeClass("active-slide");
        $slideElement.next().addClass("active-slide");
},
    onSliderLoad:function(index){
       
$(".bxslider li").eq(1+$(".bxslider .bx-clone").length/3).addClass("active-slide");
    }
});
   
    
$('#slider-next').click(function(){
  slider.goToNextSlide();
    
  return false;
});
$('#slider-prev').click(function(){
  slider.goToPrevSlide();
  
  return false;
});

});

.active-slide{
background:#f00 !important;
}

.scorboard {
	float: left;
	width: 100%;
	height: 168px;
	background-image: url(images/scor-bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	color: #000;
	padding-top: 22px;
}
.scorboard li {
	background-color:#ccc;
    margin:0 5px;
}
.scorboard .opponent {
	float: left;
	font-size: 18px;
	width: 42%;
	text-align: center;
}
.scorboard .lss {
	float: left;
	font-size: 18px;
	width: 42%;
	text-align: center;
}
.scorboard .lss h4 {
	text-align:left;
}
.scorboard .opponent h4 {
	text-align:right;
}
.vs {
	  float: left;
  margin: 26px 10px 0px 10px;
  width: 10%;
  text-align: center;
}
.scorboard h2 {
	font-size: 14px;
	font-family: 'octin_sportsregular';
	margin-top: 26px;
	margin-bottom: 2px;
	text-align: center;
	float: left;
	width: 100%;
}
.scorboard h3 {
	font-size: 18px;
	font-weight: bold;
	color: #b90000;
	margin-top: 3px;
	text-align: center;
	float: left;
	width: 100%;
	font-family: 'octin_sportsregular';
}
.scorboard h4 {
	float: left;
	width: 100%;
}
li.active {
  transform: scale(1.2);
  top: -9px;
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet"/>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div class="scorboard">
  <ul  class="bxslider">
    <li>
      <h2>4/30/15 6:00 pm</h2>
      <div class="opponent">
        <h4>Pistons85</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          105</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>5/13/15 12:00 am</h2>
      <div class="opponent">
        <h4>Nuggets101</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          98</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>5/12/15 12:00 am</h2>
      <div class="opponent">
        <h4>Hawks105</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          102</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>4/24/15 6:00 pm</h2>
      <div class="opponent">
        <h4>Trail Blazers97</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          101</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>5/2/15 12:00 am</h2>
      <div class="opponent">
        <h4>Jazz101</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          98</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>4/30/15 6:00 pm</h2>
      <div class="opponent">
        <h4>Pistons85</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          105</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>5/13/15 12:00 am</h2>
      <div class="opponent">
        <h4>Nuggets101</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          98</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>5/12/15 12:00 am</h2>
      <div class="opponent">
        <h4>Hawks105</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          102</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>4/24/15 6:00 pm</h2>
      <div class="opponent">
        <h4>Trail Blazers97</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          101</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>5/2/15 12:00 am</h2>
      <div class="opponent">
        <h4>Jazz101</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          98</h4>
      </div>
      <h3>Final</h3>
    </li>
    <li>
      <h2>4/30/15 6:00 pm</h2>
      <div class="opponent">
        <h4>Pistons85</h4>
      </div>
      <div class="vs">vs</div>
      <div class="lss">
        <h4> LSS
          105</h4>
      </div>
      <h3>Final</h3>
    </li>
  </ul>
</div>
<div class="outside">
  <span id="slider-prev">pre</span> | <span id="slider-next">next</span>
</div>

Answer 1

通过使用。

解决了这个问题

 $slideElement.next().next().addClass("active-slide");

中心div上的BXslider活动类，带有5个幻灯片

1 个答案: