Question

我正在尝试将我的网页上的图像链接为链接到JQuery功能的按钮，以淡出特定的屏幕区域并用文本替换它。我的index.html：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>WWE Chicken</title>
    <link rel = "stylesheet" type = "text/css" href = "css/index.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>


    <h1><a href = "wwe.html">WWE</a> VS <a href = "mma.html">MMA</a></h1>

    <script type="text/javascript">
        $button = $("#buttons");
        function wweView(){
            $buttons = $button.find(".button");
            $wwe = $button.find("#wwe");

            setTimeout(function(){
                $buttons.fadeOut(function(){
                    $buttons.css("display:none;");
                    $wwe.fadeIn().css("display:block;color:white;")
                });

            }, 5000);
        }
    </script>



    <div id="buttons">
        <a href = "javascript: wweView()"><img class = "button" src="images/buttons/wwe.jpg" style = "margin-top: 20%;padding-bottom: 15px;" alt="WWE" width = "50%"/></a>
        <img class = "button" src="images/buttons/mma.jpg" alt="MMA" width = "50%"/>
    <div id = "wwe">
        <h2 class = "wtitle" id = "wweTitle">WWE</h2><ol>
            <li>Not as much hand combat</li>
            <li>Square ring</li>
            <li>Has finisher moves</li>
            <li>Has objects</li>
        </ol>
    </div>

    <div id = "mma">
        <h2 class = "wtitle" id="mmaTitle">MMA</h2>
        <ol>
            <li>More karate moves</li>
            <li>No nicknames</li>
            <li>Scripting is illegal</li>
            <li>More dangerous</li>
        </ol>
    </div>
    </div>


    <div id = "pictureSlide">
        <img src = "images/wrestlers/undertaker.jpeg" class = "active" alt = "The Undertaker" width = "100%" height = "500"/>
        <img src="images/wrestlers/tripleh.jpe" alt="Triple H" width = "500" height = "500"/>
        <img src="images/wrestlers/lita.jpg" alt="Lita" width = "500" height = "500"/>
    </div>


    <script type="text/javascript">
         function swapImages(){
      var $active = $('#pictureSlide .active');
      var $next = ($('#pictureSlide .active').next().length > 0) ? $('#pictureSlide .active').next() : $('#pictureSlide img:first');
      $active.fadeOut(function(){
      $active.removeClass('active');
      $next.fadeIn().addClass('active');
      });
    }

    $(document).ready(function(){
      // Run our swapImages() function every 5secs
      setInterval('swapImages()', 5000);
    });

    </script>










</body>
</html>

我的css：

@charset "utf-8";
/* CSS Document */

h1{
    color: #EBEBEB; 
    text-align: center;
}

body{
    background-image: url("../images/swirlyred.jpeg");
    -webkit-background-size:cover;
}

a{
    color: red;
}


#differences{
    display: block;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    width: 50%;
    background-color: #ff0000;

}

#buttons{
    display:block;
    width: 40%;
    height:500px;
    float:right;
    background-color: black;
    color:white;
}

#buttons img{
    display: block;
    margin-right: auto;
    margin-left: auto;

}

#wwe{
    display: none;
}
#mma{
    display: none;
}



footer{
    background-color: black;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;

}
footer p{
    color: white;
    font-size: 16px;
    font-weight: bold;
}

#pictureSlide{

    background-color: black;
    width:50%;
    height: 100%;
    display: block;

}

#pictureSlide img{
    display: none;

}

#pictureSlide img.active{
  display:block;
}

请告诉我哪里出错了。单击按钮

后，我在JavaScript控制台中看不到任何内容

JQuery图像作为按钮淡入效果不起作用

0 个答案: