根据提供的代码,点击 ".photo_list .next" 按钮会将图片列表向右滑动。当图片列表滑动到最右边时,如果继续点击按钮,不会从头开始加载图片的原因是因为代码中有一个判断条件,当图片列表的左边距小于等于容器宽度减去图片列表宽度时,会给 ".photo_list .next" 按钮添加一个 "disabled" 类,禁用按钮的功能。

要使图片列表从头开始继续加载,可以在点击 ".photo_list .next" 按钮时,将图片列表的左边距重置为0,即将 $("#scroll ul").css("margin-left", "0"); 添加到点击事件的末尾。

以下是修改后的代码:

$(".photo_list .next").click(function() {
    // Slide the image list to the right
    $("#scroll ul").animate({marginLeft: "-=240px"}, "fast");

    // Enable/disable navigation buttons based on current position
    var marginLeft = parseInt($("#scroll ul").css("margin-left"));
    var listWidth = $("#scroll ul").width();
    var containerWidth = $("#scroll").width();
    if (marginLeft <= containerWidth - listWidth) {
        $(".photo_list .next").addClass("disabled");
    } else {
        $(".photo_list .prev").removeClass("disabled");
    }
    
    // Reset margin-left to 0 when reaching the end of the image list
    if (marginLeft <= containerWidth - listWidth) {
        $("#scroll ul").css("margin-left", "0");
    }
});

这样,当图片列表滑动到最右边时,继续点击 ".photo_list .next" 按钮会将图片列表从头开始加载

$photo_list prevclickfunction 				 Slide the image list to the left				 $#scroll ulanimatemarginLeft +=240px fast;				 				 Enabledisable navigation buttons based on current position

原文地址: https://www.cveoy.top/t/topic/hWfJ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录