你好，我使用 JSSOR 滑块，我已经在我的主页中实现了代码，但它不显示导航器项目符号和导航器箭头，当我检查项目符号div 时，它出现在左上角，我似乎无法放置它，即使我把它放在底部，它也没有显示项目符号，当我独立运行这个滑块时， 它有效，有人可以告诉我这里有什么问题。我已经添加了 $chancetoshow：2，但它仍然不起作用。这是滑块的代码
首页.php
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('<?php echo base_url("assets");?>/slider_imgs/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div data-p="225.00" style="display: none;">
<img data-u="image" src="<?php echo base_url("assets");?>/slider_imgs/red.jpg" />
<div style="position: absolute; top: 30px; left: 30px; width: 480px; height: 120px; font-size: 50px; color: #ffffff; line-height: 60px;">TOUCH SWIPE SLIDER</div>
<div style="position: absolute; top: 300px; left: 30px; width: 480px; height: 120px; font-size: 30px; color: #ffffff; line-height: 38px;">Build your slider with anything, includes image, content, text, html, photo, picture</div>
<div data-u="caption" data-t="0" style="position: absolute; top: 100px; left: 600px; width: 445px; height: 300px;">
<img src="<?php echo base_url("assets");?>/slider_imgs/c-phone.png" style="position: absolute; top: 0px; left: 0px; width: 445px; height: 300px;" />
<img src="<?php echo base_url("assets");?>/slider_imgs/c-jssor-slider.png" data-u="caption" data-t="1" style="position: absolute; top: 70px; left: 130px; width: 102px; height: 78px;" />
<img src="<?php echo base_url("assets");?>/slider_imgs/c-text.png" data-u="caption" data-t="2" style="position: absolute; top: 153px; left: 163px; width: 80px; height: 53px;" />
<img src="<?php echo base_url("assets");?>/slider_imgs/c-fruit.png" data-u="caption" data-t="3" style="position: absolute; top: 60px; left: 220px; width: 140px; height: 90px;" />
<img src="<?php echo base_url("assets");?>/slider_imgs/c-navigator.png" data-u="caption" data-t="4" style="position: absolute; top: -123px; left: 121px; width: 200px; height: 155px;" />
</div>
<div data-u="caption" data-t="5" style="position: absolute; top: 120px; left: 650px; width: 470px; height: 220px;">
<img src="<?php echo base_url("assets");?>/slider_imgs/c-phone-horizontal.png" style="position: absolute; top: 0px; left: 0px; width: 470px; height: 220px;" />
<div style="position: absolute; top: 4px; left: 45px; width: 379px; height: 213px; overflow: hidden;">
<img src="<?php echo base_url("assets");?>/slider_imgs/c-slide-1.jpg" data-u="caption" data-t="6" style="position: absolute; top: 0px; left: 0px; width: 379px; height: 213px;" />
<img src="<?php echo base_url("assets");?>/slider_imgs/c-slide-3.jpg" data-u="caption" data-t="7" style="position: absolute; top: 0px; left: 379px; width: 379px; height: 213px;" />
</div>
<img src="<?php echo base_url("assets");?>/slider_imgs/c-navigator-horizontal.png" style="position: absolute; top: 4px; left: 45px; width: 379px; height: 213px;" />
<img src="<?php echo base_url("assets");?>/slider_imgs/c-finger-pointing.png" data-u="caption" data-t="8" style="position: absolute; top: 740px; left: 1600px; width: 257px; height: 300px;" />
</div>
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="<?php echo base_url("assets");?>/slider_imgs/purple.jpg" />
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="<?php echo base_url("assets");?>/slider_imgs/red.jpg" />
</div>
<a data-u="ad" href="http://www.jssor.com" style="display:none">jQuery Slider</a>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width:16px;height:16px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top:0px;left:12px;width:40px;height:58px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora22r" style="top:0px;right:12px;width:40px;height:58px;" data-autocenter="2"></span>
脚本.js
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
[{b:5500,d:3000,o:-1,r:240,e:{r:2}}],
[{b:-1,d:1,o:-1,c:{x:51.0,t:-51.0}},{b:0,d:1000,o:1,c:{x:-51.0,t:51.0},e:{o:7,c:{x:7,t:7}}}],
[{b:-1,d:1,o:-1,sX:9,sY:9},{b:1000,d:1000,o:1,sX:-9,sY:-9,e:{sX:2,sY:2}}],
[{b:-1,d:1,o:-1,r:-180,sX:9,sY:9},{b:2000,d:1000,o:1,r:180,sX:-9,sY:-9,e:{r:2,sX:2,sY:2}}],
[{b:-1,d:1,o:-1},{b:3000,d:2000,y:180,o:1,e:{y:16}}],
[{b:-1,d:1,o:-1,r:-150},{b:7500,d:1600,o:1,r:150,e:{r:3}}],
[{b:10000,d:2000,x:-379,e:{x:7}}],
[{b:10000,d:2000,x:-379,e:{x:7}}],
[{b:-1,d:1,o:-1,r:288,sX:9,sY:9},{b:9100,d:900,x:-1400,y:-660,o:1,r:-288,sX:-9,sY:-9,e:{r:6}},{b:10000,d:1600,x:-200,o:-1,e:{x:16}}]
];
var jssor_1_options = {
$AutoPlay: true,
$SlideDuration: 800,
$SlideEasing: $Jease$.$OutQuint,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$ChanceToShow: 2
}
};
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, 1920);
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
};
我遇到了同样的问题，玩完代码后解决了，这是我的代码：
enter code here @{
ViewBag.Title = "Revista"; } <div class="row">
<div class="col-xs-2">
</div>
<script type="text/javascript" src="~/App_Start/js/jssor.js"></script>
<script type="text/javascript" src="~/App_Start/js/jssor.slider.js"></script>
<script src="jssor.slider.min.js"></script>
<script>
jssor_slider1_starter = function (containerId) {
//Reference http://www.jssor.com/development/slider-with-slideshow-no-jquery.html
//Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html
var _SlideshowTransitions = [
//Fade
{ $Duration: 1200, $Opacity: 2 }
];
var options = {
$SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$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 $Cols is greater than 1, or parking position is not 0)
$AutoPlay: 1, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$Idle: 1500, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
//$SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not
// $Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
// $Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
// $TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
// $ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
//}
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2,
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
}
</script>
<div class="col-xs-8">
<div class="jumbotron" style="width: 410px; height: 480px ">
<div id="slider1_container" style="position: relative; width: 400px; height: 480px; ">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 300px; height: 400px;
overflow: hidden">
<div>
<a href="../Images/Revista/1ContactoCeNaCeNov2011.pdf" target="_blank">
@*<img u=image src="../Images/Revista/1.png" />*@
</a>
<div style="position:absolute; background-color:#ffffff ;">
Vol.1
</div>
</div>
<div>
<a href="../Images/Revista/2ContactoCeNaCeMar2012.pdf" target="_blank">
@*<img u=image src="../Images/Revista/2.png" />*@
</a>
<div style="position:absolute; background-color:#ffffff ;">
Vol.2
</div>
</div>
<div>
<a href="../Images/Revista/3ContactoCeNaCeOct2012.pdf" target="_blank">
@*<img u=image src="../Images/Revista/3.png" />*@
</a>
<div style="position:absolute; background-color:#ffffff ;">
Vol.3
</div>
</div>
<div>
<a href="../Images/Revista/4Contacto CenaceJun13.pdf" target="_blank">
<img u=image src="../Images/Revista/4.png" />
</a>
<div style="position:absolute; background-color:#ffffff ;">
Vol.4
</div>
</div>
<div>
<a href="../Images/Revista/5ContactoCenaceNov.pdf" target="_blank">
<img u=image src="../Images/Revista/5.png" />
</a>
<div style="position:absolute; background-color:#ffffff ;">
Vol.5
</div>
</div>
<div>
<a href="../Images/Revista/6ContactoCenaceAbr2014.pdf" target="_blank">
<img u=image src="../Images/Revista/6.png" />
</a>
<div style="position:absolute; background-color:#ffffff ;">
Vol.6
</div>
</div>
<div>
<a href="../Images/Revista/7a Edición Contacto Cenace.pdf" target="_blank">
<img u=image src="../Images/Revista/7.png" />
</a>
<div style="position:absolute; background-color:#ffffff ;">
Vol.7
</div>
</div>
<span data-u="arrowleft" class="jssora11l" style="top: 122.5px; left: 8px; width: 55px; height: 55px" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora11r" style="top: 122.5px; right: 8px; width: 55px; height: 55px" data-autocenter="2"></span>
</div>
<style>
/* jssor slider arrow navigator skin 11 css */
/*
.jssora11l (normal)
.jssora11r (normal)
.jssora11l:hover (normal mouseover)
.jssora11r:hover (normal mouseover)
.jssora11l.jssora11ldn (mousedown)
.jssora11r.jssora11rdn (mousedown)
*/
.jssora11l, .jssora11r {
display: block;
position: absolute;
/* size of arrow element */
width: 37px;
height: 37px;
cursor: pointer;
background: url(../Images/a11.png) no-repeat;
overflow: hidden;
}
.jssora11l {
background-position: -11px -41px;
}
.jssora11r {
background-position: -71px -41px;
}
.jssora11l:hover {
background-position: -131px -41px;
}
.jssora11r:hover {
background-position: -191px -41px;
}
.jssora11l.jssora11ldn {
background-position: -251px -41px;
}
.jssora11r.jssora11rdn {
background-position: -311px -41px;
}
</style>
@*<a style="display: none" href="http://www.jssor.com">slider in html</a>*@
<!-- Trigger -->
<script>
jssor_slider1_starter('slider1_container');
</script>
</div>
</div>
</div>
我将箭头代码放在滑块内，更重要的是我必须更改..背景：网址（../Images/a11.png） 不重复; ..，a11.png 图像被复制到我的图像文件夹中，之后箭头出现在所需的位置，我认为这很适用于子弹，让我知道这是否适合您。