Question

我正在使用自适应幻灯片，我按照他们网站http://responsiveslides.com/上的说明进行了操作，但它只显示了我的第一张图片而且没有滑动...我检查了所有可以看到的内容，但不知何故它只是不起作用......我已经将它上传到jsfiddle https://jsfiddle.net/q421n8xo/并希望有人能给我他们宝贵的建议:)谢谢！哦，我认为下拉菜单被图像阻止了，有没有办法把它放在前面？再次感谢！

好的主要（？）突破：我发现我下载的responsiveSlides文件不正确......我让它在jsfiddle工作...有点奇怪我的电脑上。将进一步尝试。

<!DOCTYPE html>
<html>
<head>
    <title>Hire a Bach</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="js/responsiveslides.min.js"></script>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $(".rslides").responsiveSlides({
                auto: false,
                pager: true,
                speed: 500,
                maxwidth: 540
            });
        });
    </script>
</head>
<body>
    <nav>
        <ul>
            <li class = "active"><a href="index.html">Home</a></li>
            <li class="dropdown">
                <a href="hvar.html" class="dropbtn">Hvar</a>
                <div class="dropdown-content">
                    <a href="gallery.html">Gallery</a>
                    <a href="activities.html">Activities</a>
                    <a href="attractions.html">Attractions</a>
                </div>
            </li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
    </nav>
    <ul class="rslides">
        <li><img src="images/bach1.jpg" alt="Bach1"></li>
        <li><img src="images/bach2.jpg" alt="Bach2"></li>
        <li><img src="images/bach3.jpg" alt="Bach3"></li>
    </ul>
    <h2>Description</h2>
    <p>This old stone batch has the sea at its front door - built five meters from the sea it can't get closer to the clear azure Adriatic water. It is located in peaceful Jagodna bay, part of one of the most beautiful islands in the Adriatic. The house is surrounded by the beautiful Mediterranean bush full or aromatic rosemary and manuka. It is only five km from the famous medieval town of Hvar.</p>
    <p>Originally built as a family fishing batch, it has contained its character over the years. The house is made up of two separate apartments, each with two bedrooms and a terrace facing the sea. Each apartment can accommodate four people. </p>
    <p>This house can be rented as a whole or each apartment maybe separated rented. Kids and pets welcome.</p>
    <h2>Facilities</h2>
    <p>Fireplace, outdoor barbecue, showers  (indoor and outdoor) , Internet (WiFi), mobile coverage Vodafone, Sky TV, boat mooring , fridge, oven, linen provided.</p>
    <h2>Availability</h2>
    <p>Two European summer months: July and August</p>
    <div class="overflow">
    <table>
        <tr>
            <th>Price per night</th>
        </tr>
        <tr>
            <td>Upper floor Apartment</td>
            <td><b>$120</b></td>
        </tr>
        <tr>
            <td>Basement Apartment</td>
            <td><b>$110</b></td>
        </tr>
        <tr>
            <td>Whole house</td>
            <td><b>$210</b></td>
        </tr>
    </table>
    </div>
</body>
<footer>
    <a target="_blank" title="Find us on Facebook" href="http://www.facebook.com/PLACEHOLDER"><img alt="Find us on Facebook" src="images/facebookicon.png" border=0></a>
    <a target="_blank" title="Find us on Youtube" href="http://www.youtube.com/PLACEHOLDER"><img alt="Find us on Youtube" src="images/youtubeicon.png" border=0></a>
</footer>

.active {
    background-color: grey;
}


table{
    border-collapse: collapse;
    width: 400px;
    border: 1px solid black;
}

th, td {
    border: 1px solid black;
    padding: 15px;
}

th {
    background-color: #4CAF50;
    color: white;
    font-size: 20px;
}

tr:hover {
    background-color: #f6f1be;
}

.overflow {
    overflow-x:auto;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

nav li {
    float: left;
}

nav li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

nav li.dropdown {
    display: inline-block;
}

nav .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

nav .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

nav .dropdown-content a:hover {background-color: #f1f1f1}

nav .dropdown:hover .dropdown-content {
    display: block;
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;

}

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

Answer 1

看起来你没有添加正确的依赖项，我创建了一个jsfiddle的分支及其工作https://jsfiddle.net/tphgwkhh/5/

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/responsiveslides.min.js"></script>

在responsiveslides.min.js之前添加jquery，它应该没问题。对于您的第二个问题，请将以下css添加到您的css文件

 .dropdown-content{
    z-index:9999; 
  }

我希望这会有所帮助。

Responsiveslides不工作

1 个答案: