我正在尝试将滑块嵌入我的网站,但测试时出现了3个白色方块(3个不同的幻灯片)堆叠在一起。由于我对JavaScript不熟悉,很明显错过了什么。我希望有一个包含3张幻灯片的滑块,可以通过点击将用户带到另一个页面。我错在哪里了?
Javascript:
<script src="jssor.slider.min.js"></script>
<script>
jssor_slider1_starter = function (containerId) {
var options = {
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
</script>
HTML:
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;
height: 300px; ">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
overflow: hidden;">
<div><a u="image" href="sermon.html"><img src="pic05.jpg" /></a></div>
<div><a u="image" href="sunday.html"><img src="pic06.jpg" /></a></div>
<div><a u="image" href="mdeia.html"><img src="media.jpg" /></a></div>
</div>
<!-- Arrow Navigator Skin Begin -->
<style>
/* jssor slider arrow navigator skin 03 css */
/*
.jssora03l (normal)
.jssora03r (normal)
.jssora03l:hover (normal mouseover)
.jssora03r:hover (normal mouseover)
.jssora03ldn (mousedown)
.jssora03rdn (mousedown)
*/
.jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn
{
position: absolute;
cursor: pointer;
display: block;
background: url(../img/a03.png) no-repeat;
overflow:hidden;
}
.jssora03l { background-position: -3px -33px; }
.jssora03r { background-position: -63px -33px; }
.jssora03l:hover { background-position: -123px -33px; }
.jssora03r:hover { background-position: -183px -33px; }
.jssora03ldn { background-position: -243px -33px; }
.jssora03rdn { background-position: -303px -33px; }
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 123px; right: 8px">
</span>
<!-- Arrow Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
<!-- Trigger -->
<script>
jssor_slider1_starter('slider1_container');
</script>
</div>
<!-- Jssor Slider End -->