Question

我正在尝试为我的网站创建一个简单的滑块，并在jsfiddle上找到了这个示例： http://jsfiddle.net/AtFeF/79/

由此我创建了一个包含jsfiddle中所有三个组件的html文件（见下文）。但是当我在浏览器中打开这个html文件时，没有任何反应.. 谢谢你的建议！

<!DOCTYPE HTML>
<html lang="en">
<head>

<style>

#banner_area img {
    display:none;
    position: absolute;
    top: 0;
    left: 0;
}
#banner_area img:first-child {
    display:block;
}
#banner_area > img {
    width:400px;
    height:250px;
}


</style>


<script type="text/javascript">

function cycleImages() {
    var images = $('#banner_area img'),
        now = images.filter(':visible'),
        next = now.next().length ? now.next() : images.first(),
        speed = 1000;

    now.fadeOut(speed);
    next.fadeIn(speed);
}

$(function () {
    setInterval(cycleImages, 1400);
});

</script>

</head>

<body>


<div id="banner_area">
    <img src="http://www.wallpaperhi.com/thumbnails/detail/20130309/ocean%20beach%20rocks%20australia%201920x1200%20wallpaper_www.wallpaperhi.com_71.jpg" />
    <img src="http://www.star.com.au/star-event-centre/PublishingImages/about-sydney-800x500.jpg" />
    <img src="http://www.ytravelblog.com/wp-content/uploads/2013/06/Whitsunday-Islands-Queensland-Australia-6.jpg" />
</div>



</body>


</html>

Answer 1

您好像没有将jquery文件包含在您的html文档中。

因此，代码：

$(function () {
    setInterval(cycleImages, 1400);
});

不会工作。因为$属于jQuery。

所以你需要通过

包含jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

或将jquery文件从jquery.com下载到本地驱动器，并包含相对路径

<script src="js/jquery.min.js"></script>

Answer 2

您需要包含所需的javascript文件（尤其是jQuery）。

将此部分添加到<head>，它应该有效。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

或

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Answer 3

在代码中导入/包含jquery文件

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

或您在小提琴1.9.1

中的版本

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Answer 4

添加jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

将脚本包含在onload中，并将其添加到jQuery脚本标记

之后

$(window).load(function(){
  // existing code
});

您通常可以在jsFiddle的左侧边栏中找到需要添加的内容

jsfiddle代码不能在常规浏览器中使用

4 个答案: