thumbs rotation
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a href="#" class="post" title="test">
<div class="thumbs"
data-thumbs="https://ichef.bbci.co.uk/ace/standard/976/cpsprodpb/F76F/production/_101934336_hi001487062.jpg,
https://files.worldwildlife.org/wwfcmsprod/images/Elephant_and_Calf_288447_main/story_full_width/3yl7j5q9n4_WEB_288447.jpg,
https://cdn.aucklandunlimited.com/zoo/assets/media/giraffe-closeup-rectangle.jpg,
https://i.guim.co.uk/img/media/10358b976ad9e38136d261204dceb71a7adbf594/121_0_3598_2160/master/3598.jpg?width=465&dpr=1&s=none
">
<img src="https://ichef.bbci.co.uk/ace/standard/976/cpsprodpb/F76F/production/_101934336_hi001487062.jpg"
data-original="https://ichef.bbci.co.uk/ace/standard/976/cpsprodpb/F76F/production/_101934336_hi001487062.jpg"
alt="test"
srcset="https://ichef.bbci.co.uk/ace/standard/976/cpsprodpb/F76F/production/_101934336_hi001487062.jpg"></div>
</div>
</a>
CSS
.post img {
max-width: 220px;
aspect-ratio:3/2;
float:left
}
JavaScript
jQuery(document).ready(function($) {
var t = null,
r = !1;
$("body").on("mouseenter", ".thumbs", function(e) {
var o = jQuery(this);
if (r = !1, void 0 != o.data("thumbs")) {
var u = o.data("thumbs").split(","),
i = u.length,
a = 1;
t = null, clearTimeout(t), (t = function() {
0 == r && (o.find("img").attr("srcset", u[a]), a <= i && (a == i && (a = 0), setTimeout(t, 500), a++))
})()
}
}).on("mouseleave", ".thumbs", function(e) {
r = !0, t = null;
for (var o = setTimeout(";"), u = 0; u < o; u++) clearTimeout(u);
var i = $(this).find("img"),
a = i.attr("src");
i.attr("srcset", a)
}).on('touchstart', function(e) {
r = !0, t = null;
for (var o = setTimeout(";"), u = 0; u < o; u++) clearTimeout(u);
var i = $(this).find("img"),
a = i.attr("src");
i.attr("srcset", a)
})
});