我在页面中使用了 jssor slider 。首先我只使用jssor滑块作为主横幅部分。稍后我想在另一个功能部分中包含此滑块。我复制了jssor_1_slider_init = function()
并粘贴jssor_2_slider_init = function()
。但它不起作用。 如何在一个页面中包含两个独立的jssor滑块?第一个代码正在运行,第二个代码无效。
<script type="text/javascript" src="js/jssor.slider.min.js"></script>
<!-- use jssor.slider.debug.js instead for debug -->
<script>
jssor_1_slider_init = function() {
var jssor_1_options = {
$AutoPlay: true,
$AutoPlaySteps: 4,
$SlideDuration: 160,
$SlideWidth: 200,
$SlideSpacing: 3,
$Cols: 4,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$Steps: 4
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$SpacingX: 1,
$SpacingY: 1
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 809);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<!-- use jssor.slider.debug.js instead for debug -->
<script>
jssor_2_slider_init = function() {
var jssor_2_options = {
$AutoPlay: true,
$AutoPlaySteps: 4,
$SlideDuration: 160,
$SlideWidth: 200,
$SlideSpacing: 3,
$Cols: 4,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$Steps: 4
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$SpacingX: 1,
$SpacingY: 1
}
};
var jssor_2_slider = new $JssorSlider$("jssor_2", jssor_2_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 809);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<div id="jssor_1" style="position:relative;margin:-23px auto 0 auto;top:0px;left:0px;width:980px;height:550px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div style="position:absolute;top:0px;left:0px;background:url('img/loading.gif') no-repeat 50% 50%;background-color:rgba(0, 0, 0, 0.7);"></div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:560px;overflow:hidden;">
<?php
$query="select img, heading from slide_images order by id desc";
$result=$con->query($query)or die($con->error);
while($row=$result->fetch_assoc()){?>
<div id="non">
<img src="images/<?php echo $row['img'];?>" />
<div u="thumb"><?php echo $row['heading'];?></div>
</div>
<?php } ?>
</div>
</div>
<div id="jssor_1" style="position:relative;margin:-23px auto 0 auto;top:0px;left:0px;width:980px;height:550px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div style="position:absolute;top:0px;left:0px;background:url('img/loading.gif') no-repeat 50% 50%;background-color:rgba(0, 0, 0, 0.7);"></div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:560px;overflow:hidden;">
<?php
$query="select img, heading from feature order by id desc";
$result=$con->query($query)or die($con->error);
while($row=$result->fetch_assoc()){?>
<div id="non">
<img src="images/<?php echo $row['img'];?>" />
<div u="thumb"><?php echo $row['heading'];?></div>
</div>
<?php } ?>
</div>
</div>
<script>
jssor_1_slider_init();
jssor_2_slider_init();
</script>
答案 0 :(得分:3)
你有两个id =“jssor_1”的div,但没有id =“jssor_2”