Jssor图像滑块箭头没有显示

时间:2016-02-22 18:33:12

标签: javascript html jssor

我无法在图像滑块上显示箭头......我已经尝试更改定位和显示,但这并没有奏效。由于将代码放在我的索引页面上,我唯一改变的是:删除"溢出:隐藏"关于div id" jssor_1&#34 ;;滑块的实际尺寸(宽度:500px;高度:400px);和每个幻灯片的旋转速度......代码取自" no-jquery.html"文件。正如您在"背景:url"部分代码我已经将源设置为" a02.png"。

我还注意到左箭头虽然在滑块上不可见,但仍然有效(我可以将鼠标悬停在它上面然后点击它)。

我觉得我在这里错过了一些简单的东西。 HTML:

 <!DOCTYPE HTML>
    <html>
    <head>


<title>Nightfall Gaming</title>
    <link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>

<body bgcolor="#FFFFFF">

<!--site navbar-->  
<div id="navbar">
    <nav>
        <ul>
            <li><a href="Index.html" class="active" id="active2">Home</a></li>
            <li><a href="#">Game News</a></li>
            <li><a href="#">Game Reviews</a>
            <ul>
                <li><a href="#">Xbox 360</a></li>
                <li><a href="#">Xbox One</a></li>
                <li><a href="#">PS3</a></li>
                <li><a href="#">PS4</a></li>
                <li><a href="#">PC</a></li>
                <li><a href="#">Wii</a></li>
            </ul>
            </li>
            <li><a href="ContactUs.html">Contact Us/About Us</a></li>
        </ul>
    </nav>
</div>

<!--site logo-->
<div id="logo">
<a href="Index.html"><img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home"></a>
</div>

<!--mainbody div--> 
<div id="mainbody">
    <div id="slider">
    <script type="text/javascript" src="C:\Users\Cam\Desktop\NightfallGaming\js\jssor.slider.min.js" async></script>
    <script>
        jssor_1_slider_init = function() {

            var jssor_1_SlideoTransitions = [
              [{b:0.0,d:600.0,y:-290.0,e:{y:27.0}}],
              [{b:0.0,d:1000.0,y:185.0},{b:1000.0,d:500.0,o:-1.0},{b:1500.0,d:500.0,o:1.0},{b:2000.0,d:1500.0,r:360.0},{b:3500.0,d:1000.0,rX:30.0},{b:4500.0,d:500.0,rX:-30.0},{b:5000.0,d:1000.0,rY:30.0},{b:6000.0,d:500.0,rY:-30.0},{b:6500.0,d:500.0,sX:1.0},{b:7000.0,d:500.0,sX:-1.0},{b:7500.0,d:500.0,sY:1.0},{b:8000.0,d:500.0,sY:-1.0},{b:8500.0,d:500.0,kX:30.0},{b:9000.0,d:500.0,kX:-30.0},{b:9500.0,d:500.0,kY:30.0},{b:10000.0,d:500.0,kY:-30.0},{b:10500.0,d:500.0,c:{x:87.50,t:-87.50}},{b:11000.0,d:500.0,c:{x:-87.50,t:87.50}}],
              [{b:0.0,d:600.0,x:410.0,e:{x:27.0}}],
              [{b:-1.0,d:1.0,o:-1.0},{b:0.0,d:600.0,o:1.0,e:{o:5.0}}],
              [{b:-1.0,d:1.0,c:{x:175.0,t:-175.0}},{b:0.0,d:800.0,c:{x:-175.0,t:175.0},e:{c:{x:7.0,t:7.0}}}],
              [{b:-1.0,d:1.0,o:-1.0},{b:0.0,d:600.0,x:-570.0,o:1.0,e:{x:6.0}}],
              [{b:-1.0,d:1.0,o:-1.0,r:-180.0},{b:0.0,d:800.0,o:1.0,r:180.0,e:{r:7.0}}],
              [{b:0.0,d:1000.0,y:80.0,e:{y:24.0}},{b:1000.0,d:1100.0,x:570.0,y:170.0,o:-1.0,r:30.0,sX:9.0,sY:9.0,e:{x:2.0,y:6.0,r:1.0,sX:5.0,sY:5.0}}],
              [{b:2000.0,d:600.0,rY:30.0}],
              [{b:0.0,d:500.0,x:-105.0},{b:500.0,d:500.0,x:230.0},{b:1000.0,d:500.0,y:-120.0},{b:1500.0,d:500.0,x:-70.0,y:120.0},{b:2600.0,d:500.0,y:-80.0},{b:3100.0,d:900.0,y:160.0,e:{y:24.0}}],
              [{b:0.0,d:1000.0,o:-0.4,rX:2.0,rY:1.0},{b:1000.0,d:1000.0,rY:1.0},{b:2000.0,d:1000.0,rX:-1.0},{b:3000.0,d:1000.0,rY:-1.0},{b:4000.0,d:1000.0,o:0.4,rX:-1.0,rY:-1.0}]
            ];

            var jssor_1_options = {
              $AutoPlay: true,
              $Idle: 4000,
              $CaptionSliderOptions: {
                $Class: $JssorCaptionSlideo$,
                $Transitions: jssor_1_SlideoTransitions,
                $Breaks: [
                  [{d:2000,b:1000}]
                ]
              },
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$
              }
            };

            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 resizes
            function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                    refSize = Math.min(refSize, 600);
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }
            ScaleSlider();
            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            //responsive code end
        };
    </script>

    <style>

        /* jssor slider bullet navigator skin 01 css */
        /*
        .jssorb01 div           (normal)
        .jssorb01 div:hover     (normal mouseover)
        .jssorb01 .av           (active)
        .jssorb01 .av:hover     (active mouseover)
        .jssorb01 .dn           (mousedown)
        */
        .jssorb01 {
            position: absolute;
        }
        .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
            position: absolute;
            /* size of bullet elment */
            width: 12px;
            height: 12px;
            filter: alpha(opacity=70);
            opacity: .7;
            overflow: hidden;
            cursor: pointer;
            border: #000 1px solid;
        }
        .jssorb01 div { background-color: gray; }
        .jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
        .jssorb01 .av { background-color: #fff; }
        .jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }

        /* jssor slider arrow navigator skin 02 css */
        /*
        .jssora02l                  (normal)
        .jssora02r                  (normal)
        .jssora02l:hover            (normal mouseover)
        .jssora02r:hover            (normal mouseover)
        .jssora02l.jssora02ldn      (mousedown)
        .jssora02r.jssora02rdn      (mousedown)
        */
        .jssora02l, .jssora02r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 55px;
            height: 55px;
            cursor: pointer;
            background: url('C:\Users\Cam\Desktop\NightfallGaming\img\a02.png') no-repeat; 
            overflow: hidden;
        }

        .jssora02l { background-position: -3px -33px; }
        .jssora02r { background-position: -63px -33px; }
        .jssora02l:hover { background-position: -123px -33px; }
        .jssora02r:hover { background-position: -183px -33px; }
        .jssora02l.jssora02ldn { background-position: -3px -33px; }
        .jssora02r.jssora02rdn { background-position: -63px -33px; }
    </style>


    <div id="jssor_1" style="position: relative; margin: 0 auto; top: 228px; left: -180px; width: 500px; height: 400px;">
        <!-- 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('img/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; 
        : 0px; left: 0px; width: 800px; height: 400px; overflow: hidden;">
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="C:\Users\Cam\Desktop\NightfallGaming\img\001.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="img/007.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="C:\Users\Cam\Desktop\NightfallGaming\img\003.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="img/004.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="img/005.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="img/006.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="img/009.jpg" />
            </div>
            <div data-b="0" data-p="112.50" style="display: none;">
                <img data-u="image" src="img/008.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="img/011.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="img/010.jpg" />
            </div>
        </div>
        <!-- Bullet Navigator -->
        <div data-u="navigator" class="jssorb01" style="bottom:16px;right:-8px;">
            <div data-u="prototype" style="width:12px;height:12px;"></div>
        </div>
        <!-- Arrow Navigator -->
        <span data-u="arrowleft" class="jssora02l" style="top:0px;left:8px;width:55px;height:55px;" data-autocenter="2"></span>
        <span data-u="arrowright" class="jssora02r" style="top:0px;right:8px;width:55px;height:55px;" data-autocenter="2"></span>
    </div>  
    <script>
        jssor_1_slider_init();
    </script>
    </div>
</div> 

</body>
</html>

1 个答案:

答案 0 :(得分:0)

在包裹图像的最后一个结束div之前,你不必将两个箭头跨度标记放在主要slider_container标记内...