Super Simple Slider插件兼容问题：jQuery 3.2.1下无法运行求助

Hey there, let's get your slider working with jQuery 3.2.1 again! The main culprit here is that jQuery 3.x dropped support for the shorthand $(window).load() method your slider depends on to initialize after images finish loading. We'll also make a couple of small tweaks to align with modern jQuery best practices. Here's the breakdown:

Key Issues & Fixes #

• Replaced deprecated $(window).load(): jQuery 3.x no longer supports this shorthand. We'll use the standard .on('load', ...) syntax instead to wait for images to load before calculating slide heights.
• Improved click handler binding: Swapped the single click event check with event delegation for more reliable control interactions.
• Cleaned up syntax: Added missing semicolons to avoid unexpected behavior in strict mode.

Modified Working Code #

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.sss { height: 0; margin: 0; padding: 0; position: relative; display: block; overflow: hidden; }
.ssslide { width: 100%; margin: 0; padding: 0; position: absolute; top: 0; left: 0; display: none; overflow: hidden; }
.ssslide img { max-width: 100%; height: auto; margin: 0; padding: 0; position: relative; display: block; }
.sssnext, .sssprev { width: 25px; height: 100%; margin: 0; position: absolute; top: 0; background: url('images/arr.png') no-repeat; }
.sssprev { left: 3%; background-position: 0 50%; }
.sssnext { right: 3%; background-position: -26px 50%; }
.sssprev:hover, .sssnext:hover { cursor: pointer; }
.slider {width: 600px; height:400px; margin:30px auto;}
</style>
<!-- Use jQuery 3.2.1 here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
;(function($, window, document, undefined ) {
$.fn.sss = function(options) {
// Options
var settings = $.extend({
slideShow : true,
startOn : 0,
speed : 3500,
transition : 400,
arrows : true
}, options);
return this.each(function() {
// Variables
var wrapper = $(this),
slides = wrapper.children().wrapAll('<div class="sss"/>').addClass('ssslide'),
slider = wrapper.find('.sss'),
slide_count = slides.length,
transition = settings.transition,
starting_slide = settings.startOn,
target = starting_slide > slide_count - 1 ? 0 : starting_slide,
animating = false,
clicked, timer, key, prev, next,
// Reset Slideshow
reset_timer = settings.slideShow ? function() {
clearTimeout(timer);
timer = setTimeout(next_slide, settings.speed);
} : $.noop;
// Animate Slider
function get_height(target) {
return ((slides.eq(target).height() / slider.width()) * 100) + '%';
}
function animate_slide(target) {
if (!animating) {
animating = true;
var target_slide = slides.eq(target);
target_slide.fadeIn(transition);
slides.not(target_slide).fadeOut(transition);
slider.animate({paddingBottom: get_height(target)}, transition, function() {
animating = false;
});
reset_timer();
}};
// Next Slide
function next_slide() {
target = target === slide_count - 1 ? 0 : target + 1;
animate_slide(target);
}
// Prev Slide
function prev_slide() {
target = target === 0 ? slide_count - 1 : target - 1;
animate_slide(target);
}
if (settings.arrows) {
slider.append('<div class="sssprev"/>', '<div class="sssnext"/>');
}
next = slider.find('.sssnext'),
prev = slider.find('.sssprev');

// Fix 1: Replace deprecated $(window).load() with supported .on('load')
$(window).on('load', function() {
slider.css({paddingBottom: get_height(target)});

// Fix 2: Use event delegation for control clicks
slider.on('click', '.sssnext', function() {
next_slide();
});

slider.on('click', '.sssprev', function() {
prev_slide();
});

animate_slide(target);

$(document).keydown(function(e) {
key = e.keyCode;
if (key === 39) {
next_slide();
} else if (key === 37) {
prev_slide();
}
});
});
// End
});
};
})(jQuery, window, document);
</script>
<script>
jQuery(function($) {
$('.slider').sss();
});
</script>
</head>
<body>
<div class="slider">
<img src="https://yaseennikah.com/Images/Pics1.jpg" />
<img src="https://yaseennikah.com/Images/Pics2.jpg" />
<img src="https://yaseennikah.com/Images/Pics3.jpg" />
</div>
</body>
</html>

Why This Works #

1. Window Load Event: The $(window).on('load') method ensures the slider waits until all images are fully loaded before calculating their heights—this was broken in jQuery 3.x because the old shorthand was removed.
2. Event Delegation: By binding click events directly to the control classes instead of checking e.target, we avoid potential bubbling issues and make the code more maintainable.
3. Syntax Fixes: Adding missing semicolons prevents edge-case errors that can pop up in modern JavaScript environments.

This modified code will keep all your original slider features intact while working smoothly with jQuery 3.2.1.

内容的提问来源于stack exchange，提问作者yaseen ahmed