jquery - 幻灯片中的图像没有响应-6ren

jquery - 幻灯片中的图像没有响应

转载作者：太空宇宙更新时间：2023-11-04 14:12:21

在一个很好的教程的帮助下，我创建了一个简单的幻灯片，但它没有响应......接下来，我在互联网上搜索了一些我认为已经找到的解决方案，比如将宽度设置为 100%，将高度设置为自动。这些东西在没有 jQuery 的情况下与一张图像完美配合(对于 slider 来说是必需的)。但是对于 JQuery 它只是行不通......因为 slider 必须响应我不得不将 sliderWidth(=sliderBreedte) 的变量从固定宽度如 250px 更改为 $(".slide img").width() .但是现在所有的图像都出现在彼此的下面，没有任何东西可以滑动了......

你可以在这里看到我的问题:http://liesbeth.kissr.com/

这是 html:

<!doctype html>
<html lang="en">
<head>
<meta content="charset=utf-8">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-  scale=1">
<title>Liesbeth Vanaerschot</title>
<link rel="stylesheet" href="css/reset.css" media="all">
<link rel="stylesheet" href="css/style.css" media="all">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">    </script> 
<script src="js/jquery.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<!-- <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'  type='text/css'> -->
</head>
<body>
<div id="overlay">
            <div id="modal">
                <div id = "slider">
                    <ul>
                    <li class="slide" id="studio1">
                            <img  src="images/destudio1b.svg" alt="destudio1">
                        </li>
                        <li class="slide" id="studio2">
                            <img src="images/destudio2b.svg" alt="destudio2">
                        </li>
                        <li class="slide" id="studio3">
                            <img src="images/destudio3b.svg" alt="destudio3">
                        </li>
                        <li class="slide" id="studio4">
                            <img src="images/destudio4b.svg" alt="destudio4">
                        </li>
                </ul>
                    <div class="navigatie">
                        <a id="vorige" ></a>
                        <a id="volgende" ></a>
                    </div>
                </div>
                <div>
                    <p>Content you want the user to see goes here.</p>
                    <a id="sluit">sluit</a>
                </div>
            </div>
        </div>

这里是CSS:

body
{
font-size: 62.5%; /* 16px*62.5%=10px */
font-family: Cabin, Arial, sans-serif;
color: black;
background-image: url(../images/ruitjesweb.svg);
}

#overlay 
{
 /*display: none;*/
 /*position: fixed;*/
 top: 0;
 left: 0;
 margin-left: auto;
 margin-right: auto;
 width: 100%;
 height: 100%;
 text-align: center;
 z-index: 1000;
 background-image: url(../images/wie.svg);
}

#modal
{

 margin-left: auto;
 margin-right: auto;
 margin-top: 150px;
 background-color: red;
 padding:15px;
 text-align:center;
}

#slider
{
width: 100%;
max-width: 350px;
min-width: 100px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding: 0;
border-bottom: 1px dashed #FF4E00;
}

#slider ul
{
width: 100%;
max-width: 350px;
min-width: 100px;
padding: 0;
list-style-type: none;
}

.slide
{
 margin-left: auto;
 margin-right: auto;
 display: inline;
     width: 100%;
 max-width: 350px;
 min-width: 100px;
 height: auto;
}

#studio1 img,
#studio2 img,
#studio3 img,
#studio4 img
{
width: 100%;
max-width: 350px;
min-width: 200px;
height: auto;
}

.navigatie 
{
 height: 40px;
 line-height: 40px;
}
.navigatie a 
{
 display: block;
 cursor: pointer;
 padding: 0 15px;
 margin: 4px 10px 0px 10px;
}
#vorige 
{
 float: left;
 background-image: url(../images/vorige.gif);
 background-repeat: no-repeat;
 background-size: 80%;
 height: 30px;
}
#volgende 
{
 float: right;
 background-image: url(../images/volgende.gif);
 background-repeat: no-repeat;
 background-size: 80%;
 height: 30px;
}

这里是我认为问题所在的 jQuery...

$(document).ready(function(){

//slideshow 
var slides = $('#slider ul li');
var slideAantal = slides.length;
var slideBreedte = $(".slide img").width();
var slideHuidig = 0;

$('#slider ul').css('width', slideAantal * slideBreedte);

$(".navigatie a").click(function() {
    if($(this).attr("id") == "volgende")
        {
            slideHuidig = slideHuidig + 1;
        }
    if($(this).attr("id") == "vorige")
        {
            slideHuidig = slideHuidig - 1;
        }

    navigatie(slideHuidig);

    $("#slider ul").animate({"marginLeft" : (-slideHuidig * slideBreedte)});

    });

function navigatie(slideHuidig){
    if(slideAantal - 1 == slideHuidig)
    {
        $("#volgende").hide();
    }
    else
    {
        $("#volgende").show();
    }

    if(slideHuidig == 0)
    {
        $("#vorige").hide();
    }
    else
    {
        $("#vorige").show();
    }
    };

    navigatie(slideHuidig);

});