我使用imageslider" slider-with-arrow-navigator.source"在我的网站上。运行这个没问题。但我想在网站上使用不同的图片更多次使用此滑块。我需要在代码中更改什么?或者不可能吗?我试图复制并粘贴代码,然后更改图片,但是时间只有一个滑块...
---- java代码(Head)---
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<!-- use jssor.slider.mini.js (40KB) instead for release -->
<!-- jssor.slider.mini.js = (jssor.js + jssor.slider.js) -->
<script type="text/javascript" src="../js/jssor.js"></script>
<script type="text/javascript" src="../js/jssor.slider.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = {
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 0, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
});
</script>
-----来自我网站的代码(正文)---
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
overflow: hidden;">
<div><img u="image" src="../fenster/img_testslide_01.jpg" /></div>
<div><img u="image" src="../fenster/img_testslide_02.jpg" /></div>
<div><img u="image" src="../fenster/img_testslide_03.jpg" /></div>
<div><img u="image" src="../fenster/img_testslide_04.jpg" /></div>
<div><img u="image" src="../img/photography/006.jpg" /></div>
<div><img u="image" src="../img/photography/007.jpg" /></div>
<div><img u="image" src="../img/photography/008.jpg" /></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(../bilder/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>
</div>
<!-- Jssor Slider End -->
答案 0 :(得分:1)
不同的滑块使用不同的名称。 请更换所有&#39; slider1&#39;用&#39; slider2&#39;在第二个滑块中。