问题描述
我正在尝试为我的网站创建一个简单的滑块，并在jsfiddle上找到以下示例: http://jsfiddle.net/AtFeF/79/
I am trying to create a simple slider for my website and found this example on jsfiddle:http://jsfiddle.net/AtFeF/79/
由此，我创建了一个html文件，其中包含jsfiddle的所有三个组件(请参见下文).但是，当我在浏览器中打开此html文件时，没有任何反应.感谢您的建议！
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>
推荐答案
似乎您没有在HTML文档中包含jquery文件.
It seems that you haven't included jquery file into your html document.
因此，代码:
$(function () {
setInterval(cycleImages, 1400);
});
不会工作.因为$属于jQuery.
wont work. Because $ belongs to jQuery.
因此，您需要通过
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
或将jquery文件从jquery.com下载到本地驱动器，并包含相对路径为
or download jquery file from jquery.com to your local drive and include with relative path as
<script src="js/jquery.min.js"></script>
这篇关于jsfiddle代码在常规浏览器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！