BXslider活動課上的中心div與5張幻燈片

我真的把我的頭髮拉出這個問題。我在bxslider中有5張幻燈片，並且我試圖在頁面上的5張幻燈片中的第3張幻燈片上放置一個活動類，它在幻燈片第一次加載時執行......現在，當我第一次單擊下一個按鈕時活動類不會轉到下一個元素。它停留在當前幻燈片上，然後第二次移動到下一張幻燈片我點擊下一個按鈕。所以我認爲next（）函數不起作用。或者是我做錯了什麼？BXslider活動課上的中心div與5張幻燈片

jQuery(function($){ 
 
\t 
 
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 { 
 
\t float: left; 
 
\t width: 100%; 
 
\t height: 168px; 
 
\t background-image: url(images/scor-bg.png); 
 
\t background-repeat: no-repeat; 
 
\t background-position: center top; 
 
\t color: #000; 
 
\t padding-top: 22px; 
 
} 
 
.scorboard li { 
 
\t background-color:#ccc; 
 
    margin:0 5px; 
 
} 
 
.scorboard .opponent { 
 
\t float: left; 
 
\t font-size: 18px; 
 
\t width: 42%; 
 
\t text-align: center; 
 
} 
 
.scorboard .lss { 
 
\t float: left; 
 
\t font-size: 18px; 
 
\t width: 42%; 
 
\t text-align: center; 
 
} 
 
.scorboard .lss h4 { 
 
\t text-align:left; 
 
} 
 
.scorboard .opponent h4 { 
 
\t text-align:right; 
 
} 
 
.vs { 
 
\t float: left; 
 
    margin: 26px 10px 0px 10px; 
 
    width: 10%; 
 
    text-align: center; 
 
} 
 
.scorboard h2 { 
 
\t font-size: 14px; 
 
\t font-family: 'octin_sportsregular'; 
 
\t margin-top: 26px; 
 
\t margin-bottom: 2px; 
 
\t text-align: center; 
 
\t float: left; 
 
\t width: 100%; 
 
} 
 
.scorboard h3 { 
 
\t font-size: 18px; 
 
\t font-weight: bold; 
 
\t color: #b90000; 
 
\t margin-top: 3px; 
 
\t text-align: center; 
 
\t float: left; 
 
\t width: 100%; 
 
\t font-family: 'octin_sportsregular'; 
 
} 
 
.scorboard h4 { 
 
\t float: left; 
 
\t 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>

來源

2015-06-11 Jeremy Love

通過使用固定這一點。

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

來源

2015-06-19 19:20:13

BXslider活動課上的中心div與5張幻燈片

回答

相關問題