我在jQuery中有以下代码。有3个日历(jQuery fullCalendar(，我想在5秒钟后逐个更改这些日历。在固定的间歇期，我尝试了一些技巧，但没有奏效。
日历1，日历2，日历3是我的谷歌帐户的3。我想在5秒钟后逐一显示它们。表示显示日历1，隐藏其他日历2。5秒后显示日历2等等…
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript' src='gcal.js'></script>
<script>
setInterval(function(){
}, 5000)
$(document).ready(function() {
$('#calendar1').fullCalendar({
googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxx',
events: {
googleCalendarId: 'xxxxxxxxxxxxxxxxxxx'
}
});
$('#calendar2').fullCalendar({
googleCalendarApiKey: 'xxxxxxxxxxxxxxxxx',
events: {
googleCalendarId: 'xxxxxxxxxxxxxxxx'
}
});
$('#calendar3').fullCalendar({
googleCalendarApiKey: 'xxxxxxxxxxxxxxx',
events: {
googleCalendarId: 'xxxxxxxxxxxxxxx'
}
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
}
#calendar1 {
max-width: 900px;
margin: 0 auto;
}
#calendar2 {
max-width: 900px;
margin: 0 auto;
display:none;
}
#calendar3 {
max-width: 900px;
margin: 0 auto;
display:none;
}
</style>
</head>
<body>
<div id='calendar1'></div>
<div id='calendar2'></div>
<div id='calendar3'></div>
</body>
</html>
通过将日历放入对象中，您可以在interval函数中调用它，如下所示：http://jsfiddle.net/es7cdL62/2/
var numberOfCals = 3;
var calNumber = 0;
var fullCalendar = {
calendar0: {
googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxx',
events: {
googleCalendarId: 'xxxxxxxxxxxxxxxxxxx'
}
},
calendar1: {
googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxx',
events: {
googleCalendarId: 'xxxxxxxxxxxxxxxxxxx'
}
},
calendar2: {
googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxx',
events: {
googleCalendarId: 'xxxxxxxxxxxxxxxxxxx'
}
}
}
setInterval(function () {
$("#cal").html("");
$("#cal").fullCalendar(fullCalendar["calendar"+calNumber]);
calNumber = (calNumber + 1) % numberOfCals;
}, 5000);
你在html中所要做的就是
<div id="cal"></div>
您需要在setInterval中使用jquery的show()和hide()，并且您需要使用全局变量calenderNo来存储当前显示的日历，该日历将在每5秒内递增，当它变为4时返回值1。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript' src='gcal.js'></script>
<script>
var calenderNo=1;
$(document).ready(function() {
$('#calendar1').fullCalendar({
googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxx',
events: {
googleCalendarId: 'xxxxxxxxxxxxxxxxxxx'
}
});
$('#calendar2').fullCalendar({
googleCalendarApiKey: 'xxxxxxxxxxxxxxxxx',
events: {
googleCalendarId: 'xxxxxxxxxxxxxxxx'
}
});
$('#calendar3').fullCalendar({
googleCalendarApiKey: 'xxxxxxxxxxxxxxx',
events: {
googleCalendarId: 'xxxxxxxxxxxxxxx'
}
});
setInterval(function(){
$('#calendar'+calenderNo++).hide();
if(calenderNo==4)
calenderNo=1;
$('#calendar'+calenderNo).show();
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
}
#calendar1 {
max-width: 900px;
margin: 0 auto;
}
#calendar2 {
max-width: 900px;
margin: 0 auto;
display:none;
}
#calendar3 {
max-width: 900px;
margin: 0 auto;
display:none;
}
</style>
</head>
<body>
<div id='calendar1'></div>
<div id='calendar2'></div>
<div id='calendar3'></div>
</body>
</html>
我想你正在寻找在数组中设置id，并以5000 的间隔传递给每个函数
$.each([calender1, calender2, calender3] , function (index, value) {
setInterval(function(){ (value).fullCalendar({ googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxx', events: { googleCalendarId: 'xxxxxxxxxxxxxxxxxxx' } }); null}, 5000);
)};