堆棧內存溢出
  簡體   English   中英

Jssor圖像滑塊箭頭未顯示

[英]Jssor Image Slider arrows not showing

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

問題描述

我無法顯示圖像滑塊上的箭頭...我試圖更改位置和顯示，但是沒有用。 自從將代碼放在“索引”頁面上以來，我所做的唯一更改是：刪除div ID為“ jssor_1”的“ overflow：hidden”； 滑塊的實際大小（寬度：500像素；高度：400像素）； 以及每個幻燈片的旋轉速度...該代碼取自“ 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 個解決方案

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

您不必在包裹圖像的最后一個關閉div之前將兩個箭頭跨度標記放在主slider_container標記內...

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Jssor Slider如何向縮略圖庫添加箭頭 jssor滑塊不響應導航箭頭 無法創建帶箭頭的Jssor Slider並在其中顯示2個部分 JSSOR滑塊我無法將導航箭頭或項目符號鏈接到幻燈片過渡 Jssor縮略圖滑塊縮略圖未顯示 jssor圖像滑塊中的隨機幻燈片順序 Safari中的圖像質量低，使用jssor滑塊 jQuery Jssor圖像滑塊寬度問題 Jssor Slider-如何將復選框添加到縮略圖 如何在jssor滑塊中更改圖像大小？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM