$photo_list prevclickfunction Slide the image list to the left $#scroll ulanimatemarginLeft +=240px fast; Enabledisable navigation buttons based on current position
根据提供的代码,点击 ".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" 按钮会将图片列表从头开始加载
原文地址: https://www.cveoy.top/t/topic/hWfJ 著作权归作者所有。请勿转载和采集!