jsfiddle code not working in regular browser

2020-05-09 23:21发布

站内问答 / JavaScript
533 4 4

I am trying to create a simple slider for my website and found this example on jsfiddle: http://jsfiddle.net/AtFeF/79/

From that I created an html file containing all three components from jsfiddle (see below). But when I open this html file in my browser, nothing happens.. Thanks for your advice!

<!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>

4条回答
我命由我不由天
2楼-- · 2020-05-09 23:36

Add jQuery

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

Enclose the script in onload, and add it after the jQuery script tag

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

You can generally find what you need to add in left sidebar of jsFiddle

查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
3楼-- · 2020-05-09 23:47

It seems that you haven't included jquery file into your html document.

Hence, the code :

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

wont work. Because $ belongs to jQuery.

So you need to include jquery either by 

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

or download jquery file from jquery.com to your local drive and include with relative path as

<script src="js/jquery.min.js"></script>
查看更多
0人赞 添加讨论(0) 举报
可以哭但决不认输i
4楼-- · 2020-05-09 23:48

You need to include the required javascript files (particularly jQuery).

Add this section to your <head> and it should work.

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

or

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
查看更多
0人赞 添加讨论(0) 举报
够拽才男人
5楼-- · 2020-05-09 23:58

Import/include jquery file in your code 

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

or the version that you have at fiddle 1.9.1

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)