堆栈内存溢出
  简体   繁体   English

Jssor图像滑块箭头未显示

[英]Jssor Image Slider arrows not showing

 原文  2016-02-22 18:33:12  8   1    javascript/ html/ jssor

问题描述

I can't get the arrows on the image slider to appear... I've tried changing the positioning and display but that hasn't worked. 我无法显示图像滑块上的箭头...我试图更改位置和显示，但是没有用。 Since putting the code on my Index page the only things I've changed are: removing "overflow:hidden" on the div id "jssor_1"; 自从将代码放在“索引”页面上以来，我所做的唯一更改是：删除div ID为“ jssor_1”的“ overflow：hidden”； the actual size of the slider (width:500px;height:400px); 滑块的实际大小（宽度：500像素；高度：400像素）； and the rotation speed of each slide... The code was taken from the "no-jquery.html" file. 以及每个幻灯片的旋转速度...该代码取自“ no-jquery.html”文件。 As you can see on the "background: url" part of the code I've already set the source to the "a02.png". 正如您在代码的“背景：URL”部分看到的那样，我已经将源设置为“ a02.png”。

I also noticed that the left arrow, whilst not visible on the slider, does still work (I can hover over it and click it). 我还注意到，左箭头虽然在滑块上不可见，但仍然可以工作（我可以将鼠标悬停在其上并单击它）。

I feel like I'm missing something simple here. 我觉得这里缺少一些简单的东西。 HTML: 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 个解决方案

解决方案1
 0  2016-02-22 18:52:03

您不必在包裹图像的最后一个关闭div之前将两个箭头跨度标记放在主slider_container标记内...

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Jssor Slider如何向缩略图库添加箭头 - Jssor Slider how to add arrows to thumbnail image gallery jssor滑块不响应导航箭头 - jssor slider not responding to nav arrows 无法创建带箭头的Jssor Slider并在其中显示2个部分 - Unable to create a Jssor Slider with arrows and display 2 pieces inside JSSOR滑块我无法将导航箭头或项目符号链接到幻灯片过渡 - JSSOR slider I cant link navigation arrows or bullets to slide transition Jssor缩略图滑块缩略图未显示 - Jssor thumbnail slider thumbnails not showing up jssor图像滑块中的随机幻灯片顺序 - Random slide order in jssor image slider Safari中的图像质量低，使用jssor滑块 - low image quality in safari, jssor slider is used jQuery Jssor图像滑块宽度问题 - jQuery Jssor Image Slider Width Issue Jssor Slider-如何将复选框添加到缩略图 - Jssor Slider - How to add checkbox to thumb image 如何在jssor滑块中更改图像大小？ - how to change image size in jssor slider?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM