0
我使用循環插件爲我的旗幟與標題和標題有一個滾動條,如下圖所示。我使用mCustomScrollbar
來設置滾動條的樣式。滾動條在第一個標題中工作正常,但是當我將其應用於第二個標題時,滾動條未出現。發生這種情況的原因是什麼,它是與cycle
還是什麼有關?mCustomScrollbar插件令人困惑
下圖顯示了這個問題:
的代碼(JavaScript的):
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slider').cycle({
fx: 'scrollHorz',
slideExpr: "img:not(.hide)",
slideResize: false,
containerResize: false,
speed: 500,
timeout: 5000,
after: function(curr,next,opts) {
var index=opts.currSlide;
$('#caption div.captionContent:visible').hide();
$('#caption div.captionContent').eq(index).show();
}
});
});
</script>
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$(".cc").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
</script>
HTML:
<div class="banner">
<div id="caption">
<div class="captionContent slide5">
<div class="cc">
<p>Our clients receive a personalised one on one service from one of our principles to guide them from the initial brief to the final completion of their project.</p>
</div>
</div>
<div class="captionContent"></div>
<div class="captionContent"></div>
<div class="captionContent"></div>
</div>
<div class="slider">
<img class="hide" src="images/banner1.jpg" alt="slider 1" />
<img src="images/banner5.jpg" alt="slider 1" />
<img src="images/banner2.jpg" alt="slider 1" />
<img src="images/banner3.jpg" alt="slider 1" />
<img src="images/banner5.jpg" alt="slider 1" />
</div>
</div><!-- end banner -->