我正在做一个简单的滚动图像循环,第一个图像在屏幕上显示得很好,但没有任何内容,我是不是用错了"this"?代码:
var width = $(window).width();
var height = $(window).height();
var size = (height + width)/2;
$( document ).ready(function()
{
$('#pictureFrame').children('img').each(function(){$(this).css('left', '100%')});
});
window.onload = function(){startSlideshow($('#pictureFrame > img'))};
function startSlideshow(myobj) {
$(myobj).next().animate({left: "-=" + (width + 2000)},{
duration: 30000,
queue: false,
easing: 'linear',
complete: function() {
$(myobj).css('left', '100%')
}
});
time = ($(this).width()* 10)/(width + 2000);
setTimeout(startSlideshow($(this)),time);
}
HTML:
<div id="pictureFrame">
<img class="slideshow" src="img1.jpg">
<img class="slideshow" src="img2.jpg">
<img class="slideshow" src="img3.jpg">
<img class="slideshow" src="img4.jpg">
</div>
我认为这样的东西更接近你想要的:
window.onload = function() {
startSlideshow($('#pictureFrame > img:first'))
};
function startSlideshow(myobj) {
myobj.animate({left: "-=" + (width + 2000)},{
duration: 30000,
queue: false,
easing: 'linear',
complete: function() {
$(myobj).css('left', '100%')
}
});
var next = myobj.next();
if (!next.length) {
next = myobj.siblings().first();
}
time = ($(this).width()* 10)/(width + 2000);
setTimeout(function() {
startSlideshow(next)
}, time);
}
对startSlideshow
的每次调用都会转到DIV中的下一个映像。当它用完时,它会返回到第一个映像。