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

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

jquery html css

JQuery图像作为按钮淡入效果不起作用,jquery,html,css,Jquery,Html,Css,我试图将网页上的图像链接为链接到JQuery函数的按钮，以便淡出特定的屏幕区域并用文本替换它。My index.html： <!doctype html> <html> <head> <meta charset="utf-8"> <title>WWE Chicken</title> <link rel = "stylesheet" type = "text/css" href = "css/in

我试图将网页上的图像链接为链接到JQuery函数的按钮，以便淡出特定的屏幕区域并用文本替换它。My 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>

请告诉我哪里出了问题。单击“更改”按钮后，我在JavaScript控制台中看不到任何内容

$button=$（“#按钮”）；
函数wview（）{
$buttons=$button.find（“.button”）；
//...
}

更改

$button=$（“#按钮”）；
函数wview（）{
$buttons=$button.find（“.button”）；
//...
}

您正在初始化变量

$button=$（“#buttons”）

在documentReady（）函数之前，因此jquery仍然没有加载，因此没有任何效果。只需将其放在weeView（）中，以便在调用时对其进行初始化，如下所示：

@charset“utf-8”；
/*CSS文档*/
h1{
颜色：#EBEBEB；
文本对齐：居中；
}
身体{
背景图像：url（“../images/whirlyred.jpeg”）；
-webkit背景尺寸：封面；
}
a{
颜色：红色；
}
#分歧{
显示：块；
文本对齐：居中；
右边距：自动；
左边距：自动；
宽度：50%；
背景色：#ff0000；
}
#钮扣{
显示：块；
宽度：40%；
高度：500px；
浮动：对；
背景色：黑色；
颜色：白色；
}
#按钮img{
显示：块；
右边距：自动；
左边距：自动；
}
#wwe{
显示：无；
}
#甲基丙烯酸甲酯{
显示：无；
}
页脚{
背景色：黑色；
文本对齐：居中；
显示：块；
左边距：自动；
右边距：自动；
宽度：70%；
}
页脚p{
颜色：白色；
字体大小：16px；
字体大小：粗体；
}
#图片幻灯片{
背景色：黑色；
宽度：50%；
身高：100%；
显示：块；
}
#图片滑动img{
显示：无；
}
#图片滑动img.active{
显示：块；
}


WWE鸡
VS
函数wview（）{
$按钮=$（“#按钮”）；
$buttons=$button.find（“.button”）；
$wwe=$button.find（#wwe”）；
setTimeout（函数（）{
$buttons.fadeOut（函数（）{
$buttons.css（“显示：无；”）；
$wwe.fadeIn（）.css（“显示：块；颜色：白色；”）
});
}, 1000);
}
WWE
没有那么多的徒手格斗
方环
终结者有动作吗
有对象
甲基丙烯酸甲酯
更多空手道动作
没有绰号
脚本编写是非法的
更危险
函数swapImages（）{
var$active=$（'#pictureSlide.active'）；
var$next=（$（'#pictureSlide.active'）.next（）.length>0）？$（'#pictureSlide.active'）.next（）：$（'#pictureSlide img:first'）；
$active.fadeOut（函数（）{
$active.removeClass（'active'）；
$next.fadeIn（）.addClass（'active'）；
});
}
$（文档）.ready（函数（）{
//每5秒运行一次swapImages（）函数
设置间隔（'swapImages（）'，5000）；
});

您正在初始化变量

$button=$（“#buttons”）

在documentReady（）函数之前，因此jquery仍然没有加载，因此没有任何效果。只需将其放在weeView（）中，以便在调用时对其进行初始化，如下所示：

@charset“utf-8”；
/*CSS文档*/
h1{
颜色：#EBEBEB；
文本对齐：居中；
}
身体{
背景图像：url（“../images/whirlyred.jpeg”）；
-webkit背景尺寸：封面；
}
a{
颜色：红色；
}
#分歧{
显示：块；
文本对齐：居中；
右边距：自动；
左边距：自动；
宽度：50%；
背景色：#ff0000；
}
#钮扣{
显示：块；
宽度：40%；
高度：500px；
浮动：对；
背景色：黑色；
颜色：白色；
}
#按钮img{
显示：块；
右边距：自动；
左边距：自动；
}
#wwe{
显示：无；
}
#甲基丙烯酸甲酯{
显示：无；
}
页脚{
背景色：黑色；
文本对齐：居中；
显示：块；
左边距：自动；
右边距：自动；
宽度：70%；
}
页脚p{
颜色：白色；
字体大小：16px；
字体大小：粗体；
}
#图片幻灯片{
背景色：黑色；
宽度：50%；
身高：100%；
显示：块；
}
#图片滑动img{
显示：无；
}
#图片滑动img.active{
显示：块；
}


WWE鸡
VS
函数wview（）{
$按钮=$（“#按钮”）；
$buttons=$button.find（“.button”）；
$wwe=$button.find（#wwe”）；
setTimeout（函数（）{
$buttons.fadeOut（函数（）{
$buttons.css（“显示：无；”）；
$wwe.fadeIn（）.css（“显示：块；颜色：白色；”）
});
}, 1000);
}
WWE
没有那么多的徒手格斗
方环
终结者有动作吗
有对象
甲基丙烯酸甲酯
更多空手道动作
没有绰号
脚本编写是非法的
更危险
函数swapImages（）{
var$active=$（'#pictureSlide.active'）；
var$next=（$（'#pictureSlide.active'）.next（）.length>0）？$（'#pictureSlide.active'）.next（）：$（'#pictureSlide img:first'）；
$active.fadeOut（函数（）{
$active.removeClass（'active'）；
$next.fadeIn（）.addClass（'acti
@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;
}