Question

这是我的滑块js代码：

jQuery(document).ready(function ($) {
            var options = 
    {
         $AutoPlay: true,
         $FillMode: 2, 
         $Idle: 6000,
         $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$,
            $ChanceToShow: 2,
        }
    };
    var jssor_slider1 = new $JssorSlider$("sliderContainer", options);
    var jssor_slider1 = new $JssorSlider$('sliderContainer', options);


function ScaleSlider() 
{
 var parentWidth = $('#sliderContainer').parent().width(); 
if (parentWidth)
    jssor_slider1.$ScaleWidth(Math.min(parentWidth, 1920));
else
    window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();

$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);

});

和html：

<div id="sliderContainer" style="position:relative; top:0; left:0px; width:1300px; height:500px; margin-left:auto; margin-right:auto;">
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; right: 0px; top: 0px; width: 1300px; height: 500px;">
    <div><img u="image" src="Img/Slider/slide1.jpg" /></div>
    <div><img u="image" src="Img/Slider/slide2.jpg" /></div>
    <div><img u="image" src="Img/Slider/slide3.jpg" /></div>
    <div><img u="image" src="Img/Slider/slide4.jpg" /></div>

</div>   
 <!--#region Arrow Navigator Skin Begin -->
    <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
    <style>
        /* jssor slider arrow navigator skin 09 css */
        /*
        .jssora09l                  (normal)
        .jssora09r                  (normal)
        .jssora09l:hover            (normal mouseover)
        .jssora09r:hover            (normal mouseover)
        .jssora09l.jssora09ldn      (mousedown)
        .jssora09r.jssora09rdn      (mousedown)
        */
        .jssora09l, .jssora09r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 50px;
            height: 50px;
            cursor: pointer;
            background: url(../img/a09.png) no-repeat;
            overflow: hidden;
            opacity: .4;
            filter: alpha(opacity=40);
        }
        .jssora09l { background-position: -5px -35px; }
        .jssora09r { background-position: -65px -35px; }
        .jssora09l:hover { background-position: -5px -35px; opacity: .8; filter:alpha(opacity=80); }
        .jssora09r:hover { background-position: -65px -35px; opacity: .8; filter:alpha(opacity=80); }
        .jssora09l.jssora09ldn { background-position: -5px -35px; opacity: .3; filter:alpha(opacity=30); }
        .jssora09r.jssora09rdn { background-position: -65px -35px; opacity: .3; filter:alpha(opacity=30); }
    </style>
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora09l" style="top: 123px; left: 8px;">
    </span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora09r" style="top: 123px; right: 8px;">
    </span>
    <!--#endregion Arrow Navigator Skin End -->

<div u="any" id="sliderTitle"><div class="textWrap" style="position:relative; top:40%;"><h1>123</h1><br>
<span style="color:#9B9999; font-size:80%;">123</span></div></div>
</div>

缩放效果非常好。也许我错过了什么，或者其他什么;我的代码有什么问题？它只是从这里复制粘贴：http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html

Answer 1

代码可在我的浏览器中使用。

可能有几个原因：

1-确保您的（img /）文件夹（a09.png）中有图像。

2-将您的路径更改为网址（../ img / a09.png）至网址（img / a09.png），以查看您的箭头图片是否会显示。

3-根据您的容器/照片尺寸，可能需要调整图像的位置。看起来它是一个全屏滑块，但无论我的照片是否更小，右箭头和左箭头导航器都出现了。

Html - Jssor Arrow导航器不显示

1 个答案: