在 .next() 调用后在 jquery 中使用 "this"



我正在做一个简单的滚动图像循环,第一个图像在屏幕上显示得很好,但没有任何内容,我是不是用错了"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中的下一个映像。当它用完时,它会返回到第一个映像。

最新更新