微小的 slider 在第一次图像更改时进行调整，然后 go 平滑。 谢谢

Question

就像在主题中一样，我有微小的 slider，他在第一次更改图像时进行了 2 次调整，然后 go 平滑，一切都很好，但第一次加载给出了尝试 2 更改图像的调整。 也许你能弄清楚？ 真的感谢您的时间，我对 webdev 很陌生，所以不要对我粗鲁：P

 $(function() { const wrapper = $('#slider'); setInterval(function() { const firstChild = $(wrapper).children()[0]; $(firstChild).fadeOut(1000).next('a').fadeIn(1000).end().appendTo('#slider'); }, 3000); });

 img { max-width: 100%; } #slider:after { content: ""; display: table; clear: both; } #slider img { float: left; margin: 0 -100% 0 0; } #slider { width: 200px; background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <figure id="slider"> <a target="_blank" href="http://www.google.pl"> <img src="https://i1.kwejk.pl/k/obrazki/2020/11/kwzgq1D7NOtJnNRp.jpg" /> </a> <a target="_blank" href="http://www.google.pl"> <img src="https://media.istockphoto.com/vectors/adorable-hedgehog-in-modern-flat-style-vector-vector-id930758362?k=20&m=930758362&s=612x612&w=0&h=UjgzuyypJq1tNI3RVKqlB1DjS1He72xtlw47DNWvFi8=" /> </a> <a target="_blank" href="http://www.google.pl"> <img src="https://img.redro.pl/plakaty/african-hedgehog-rolling-over-while-looking-at-camera-happy-400-195157167.jpg" /> </a> </figure>

Answer 1

隐藏锚点，并在开头调用您的区间 function。

 $(function() { const wrapper = $('#slider'); const transition = function() { const firstChild = $(wrapper).children()[0]; $(firstChild).fadeOut(1000).next('a').fadeIn(1000).end().appendTo('#slider'); }; transition(); // call at beginning setInterval(transition, 3000); });

 img { max-width: 100%; } #slider:after { content: ""; display: table; clear: both; } #slider img { float: left; margin: 0 -100% 0 0; } #slider { width: 200px; background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <figure id="slider"> <a hidden target="_blank" href="http://www.google.pl"> <img src="https://i1.kwejk.pl/k/obrazki/2020/11/kwzgq1D7NOtJnNRp.jpg" /> </a> <a hidden target="_blank" href="http://www.google.pl"> <img src="https://media.istockphoto.com/vectors/adorable-hedgehog-in-modern-flat-style-vector-vector-id930758362?k=20&m=930758362&s=612x612&w=0&h=UjgzuyypJq1tNI3RVKqlB1DjS1He72xtlw47DNWvFi8=" /> </a> <a hidden target="_blank" href="http://www.google.pl"> <img src="https://img.redro.pl/plakaty/african-hedgehog-rolling-over-while-looking-at-camera-happy-400-195157167.jpg" /> </a> </figure>