Question

我一直在使用我正在构建的网站上的Jssor滑块。这是第一次使用它，我遇到了两个问题：

1）滑块似乎是在滑块<a>内消毒<div>标签，删除任何内嵌样式并使<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立即解决了所有问题。

Jssor滑块不会暂停和消毒锚标签

2 个答案: