Jssor滑塊不暫停和消毒錨標簽

Question

我正在使用我正在構建的網站上的Jssor滑塊。 這是第一次使用它，我遇到了兩個問題：

1）滑塊似乎正在對滑塊<div> <a>標簽進行滅菌，刪除所有內聯樣式並導致<a>標簽不可單擊。 它還似乎將標簽推到滑塊本身的上方和外側。 我嘗試進入瀏覽器開發人員設置並實時更改代碼，但是錨點仍然損壞

2）將$PauseOnHover選項設置為1不會阻止滑塊在懸停時自動播放。

這是我當前頁面上的代碼塊：

<script type="text/javascript" src="../js/jssor.slider.mini.js"></script>
<script>
    jQuery(document).ready(function ($) {

        var options = {
            $AutoPlay: true,
            $PauseOnHover: 1,
            $PlayOrientation: 1,
            $AutoPlayInterval: 6000,
            $SlideDuration: 850,
        };

        var jssor_slider1 = new $JssorSlider$("homeslide_container", options);
    });
</script>

        <!-- Jssor Slider Begin -->
        <div id="homeslide_container" style="position: relative; width: 944px; height: 325px;">

            <!-- Loading Screen -->
            <div u="loading" style="position: absolute; top: 0px; left: 0px;">
                <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                    background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
                </div>
                <div style="position: absolute; display: block; background: url(../images/loading.gif) no-repeat center center;
                    top: 0px; left: 0px;width: 100%;height:100%;">
                </div>
            </div>

            <!-- Slides Container -->
            <div u="slides" style="float:left; width:765px;height:332px; overflow: hidden;">       
                <!-- SLIDE ONE -->
                <div>
                    <a href="schooldesigns.html">
                        <img u="image" src="images/slider/slider4.jpg" style="position:absolute; top:0; left:0;height:100%;width:100%;z-index:-2;" />
                        <p style="font-size:2em; color:#fec30f;text-align:left;margin:15px 55px 0px 55px;text-shadow: 2px 2px black;">
                            Welcome
                        </p>
                        <p style="font-size:3.6em; font-family: 'Work Sans', sans-serif; color:#e9e9f3;text-align:left;margin:0px 55px;text-shadow: 3px 3px black;">
                            Class of 2016
                        </p>
                        <p style="color:#afafaf; background-color:black; position:absolute; width:100%; bottom:0px; text-transform: uppercase; font-family:'Trebuchet MS', Helvetica, sans-serif; font-size:1em; padding:2px; letter-spacing: 4px; text-shadow: 1px 1px #444444;">
                        Brand new class list shirt designs and more    
                        </p>
                    </a>
                </div>
                <!-- SLIDE TWO -->
                <div>
                    <a href="gameday.html" style="position:absolute;top:0;">
                        <img u="image" src="../images/slider/slider2.jpg" style="height:100%;width:100%;z-index:-2;" />
                        <p style="font-size:3.6em; font-family: 'Work Sans', sans-serif; color:#e9e9f3;text-align:left;margin:0px 55px;text-shadow: 3px 3px black;">
                            GAME ON!
                        </p>
                        <p style="font-size:2em; color:#fec30f;text-align:left;margin:15px 55px 0px 55px;text-shadow: 2px 2px black;">
                            Bold Designs &amp; Game Jerseys
                        </p>
                        <p style="color:#afafaf; background-color:black; position:absolute; width:100%; bottom:0px; text-transform: uppercase; font-family:'Trebuchet MS', Helvetica, sans-serif; font-size:1em; padding:2px; letter-spacing: 4px; text-shadow: 1px 1px #444444;">
                            Oversized fit for maximum comfort
                        </p>
                    </a>
                </div>
                <!-- SLIDE THREE -->
                <div>
                    <img u="image" src="../images/slider/slider3.jpg" style="width:708px"/>
                </div>
            </div>
            <p id="main_desc" style="height:292px; width:141px; float:right; clear:both;text-align:left; margin:0px;box-shadow:none;">Welcome to <b style="color:#00a1e4">WEBSITE</b>! Specialists in custom apparel for your 2016 senior class. <br><br>Website brings you customizable designs for your Senior, Junior, Sophomore and Freshman classes, school clubs, and sports teams!</p>
        </div>

        <!-- Jssor Slider End -->

Answer 1

請更換

<img u="image" src="images/slider/slider4.jpg" style="position:absolute; top:0; left:0;height:100%;width:100%;z-index:-2;" />

與

<img u="image" src="images/slider/slider4.jpg" />

順便說一句， $PauseOnHover: 1應該工作。 請仔細檢查，必要時下載最新版本。

Answer 2

解決：我的CSS已將容器的z-index設置為-10。 刪除z-index可以立即解決所有問題。