我有这段代码:
问题是,我无法将'active'类添加到mac div中的getJson图像中。在这里整合一个实时功能会有帮助吗?
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=59597329@N08&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
$("<img src='" + item.media.m + "'></img>").appendTo("#mac");
});
});
$("#mac img:first").addClass('active');
function slideSwitch() {
var $active = $('#mac img.active');
if ( $active.length == 0 ) $active = $('#mac img:last');
var $next = $active.next().length ? $active.next()
: $('#mac img.active');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( slideSwitch, 5000 );
});
答案 0 :(得分:1)
你没有说出你真正想做的事情。一种解决方案是将所有必须在DOM上工作的代码放在ready
处理程序中,并在加载数据后触发间隔:
function slideSwitch() {
var $active = $('#mac img.active');
if ( $active.length == 0 ) $active = $('#mac img:last');
var $next = $active.next().length ? $active.next() : $('#mac img.active');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=59597329@N08&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
$("<img src='" + item.media.m + "'></img>").appendTo("#mac");
});
$("#mac img:first").addClass('active');
setInterval( slideSwitch, 5000 );
});
});