无法弄清楚如何使用导航器与JSSOR滑块
问题描述:
对不起,但即使在网站上的所有帮助,我仍然无法让导航器在我的页面上工作。我有以下HTML:无法弄清楚如何使用导航器与JSSOR滑块
<div id="bj3dd" style="left: 0px; top: 0px; width: 600px; height: 300px;">
<div data-slides="" u="slides" style="width: 600px; height: 300px;">
<div>
<img u="image" src="http://www.jssor.com/img/photography/002.jpg">
<img u="thumb" src="http://www.jssor.com/img/photography/002.jpg" style="width:50px;height:50px;">
</div>
<div>
<img u="image" src="http://www.jssor.com/img/photography/003.jpg">
<img u="thumb" src="http://www.jssor.com/img/photography/003.jpg" style="width:50px;height:50px;">
</div>
<div>
<img u="image" src="http://www.jssor.com/img/photography/004.jpg">
<img u="thumb" src="http://www.jssor.com/img/photography/004.jpg" style="width:50px;height:50px;">
</div>
<div>
<img u="image" src="http://www.jssor.com/img/photography/005.jpg">
<img u="thumb" src="http://www.jssor.com/img/photography/005.jpg" style="width:50px;height:50px;">
</div>
</div>
<span class="jssora03l" u="arrowleft"></span>
<span class="jssora03r" u="arrowright"></span>
<div class="jssort03" u="thumbnavigator" style="position: absolute; width: 600px; height: 60px; left: 0px; bottom: 0px;"></div>
</div>
用下面的JS代码:
$(document).ready(function() {
var options = {
$AutoPlay: true,
$AutoPlaySteps: 1,
$AutoPlayInterval: 4000,
$DragOrientation: 1,
$ArrowKeyNavigation: true,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 1,
$AutoCenter: 0,
$Steps: 1
},
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$ChanceToShow: 2,
}
};
new $JssorSlider$('bj3dd', options);
});
尝试,因为我可能,我不能让导航工作,请把我从我的痛苦并告诉我我做错了什么!
答
<div id="bj3dd" style="left: 0px; top: 0px; width: 600px; height: 300px;">
<div data-slides="" u="slides" style="width: 600px; height: 300px;">
<div>
<img u="image" src="http://www.jssor.com/img/photography/002.jpg">
<img u="thumb" src="http://www.jssor.com/img/photography/002.jpg" style="width:50px;height:50px;">
</div>
<div>
<img u="image" src="http://www.jssor.com/img/photography/003.jpg">
<img u="thumb" src="http://www.jssor.com/img/photography/003.jpg" style="width:50px;height:50px;">
</div>
<div>
<img u="image" src="http://www.jssor.com/img/photography/004.jpg">
<img u="thumb" src="http://www.jssor.com/img/photography/004.jpg" style="width:50px;height:50px;">
</div>
<div>
<img u="image" src="http://www.jssor.com/img/photography/005.jpg">
<img u="thumb" src="http://www.jssor.com/img/photography/005.jpg" style="width:50px;height:50px;">
</div>
</div>
<!-- Arrow Navigator Skin Begin -->
<!-- Open 'skin\arrow-03.source.html' and copy arrow navigator skin here -->
<!-- Arrow Navigator Skin End -->
<!-- ThumbnailNavigator Skin Begin -->
<!-- Open 'skin\thumbnail-03.source.html' and copy thumbnail navigator skin here -->
<!-- ThumbnailNavigator Skin End -->
</div>