网格中的图像使用jquery或其他javascript在指定的时间间隔内更改

Question

我正在尝试开发一个图像网格，使用jquery或任何其他javascript方法以指定的间隔随机更改一些图像。 请注意，我不需要同时更改所有图像。 与其他图像相比，一组图像可以在不同的时间间隔内改变。

图像被定位为父div的绝对位置，以便它可以淡入而另一个淡出，直到它到达最后一个阶段。

我完全陷入困境，不知道如何实现这一目标。 任何人都可以帮我这个吗？ 以下是我的代码

 (function(){ let first = $('.column1 img:gt(0)'); first.hide(); let images = $('.column1').find('img'); setInterval(function(){ let current = $('.column1 img:visible'); let next = current.next().length ? current.next():$('.column1 img:eq(0)'); current.fadeOut(300); next.fadeIn(300); }, 3000); }); 

 #main__slider{ width:40rem; height:25rem; margin: 0 auto; display:grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr) } .column1{ border:1px solid; position:relative; } img{ width:100%; height:100%; object-fit:cover; position:absolute; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="main__slider"> <div class="column1"> <img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt=""> <img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt=""> </div> <div class="column1"> <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt=""> <img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt=""> </div> <div class="column1"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt=""> <img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt=""> </div> <div class="column1"> <img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt=""> <img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt=""> </div> <div class="column1"> <img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt=""> <img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt=""> </div> <div class="column1"> <img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt=""> <img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt=""> </div> <div class="column1"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt=""> <img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt=""> </div> <div class="column1"> <img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt=""> <img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt=""> </div> <div class="column1"> <img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt=""> <img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt=""> </div> </div> 

Answer 1

你需要创建一种类似于下面的循环，并且还要考虑random()以使fade函数具有不同的时序：

 $('.column1 img:eq(0)').each(function() { $(this).hide(); }); setInterval(function() { $('.column1 img:visible').each(function() { let next = $(this).next().length ? $(this).next() : $(this).parent().find('img:eq(0)'); var t = Math.random()*2000; $(this).delay(t).fadeOut(500); next.delay(t).fadeIn(500); }); }, 3000); 

 #main__slider { width: 40rem; height: 25rem; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr) } .column1 { border: 1px solid; position: relative; } img { width: 100%; height: 100%; object-fit: cover; position: absolute; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="main__slider"> <div class="column1"> <img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt=""> <img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt=""> </div> <div class="column1"> <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt=""> <img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt=""> </div> <div class="column1"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt=""> <img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt=""> </div> <div class="column1"> <img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt=""> <img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt=""> </div> <div class="column1"> <img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt=""> <img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt=""> </div> <div class="column1"> <img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt=""> <img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt=""> </div> <div class="column1"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt=""> <img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt=""> </div> <div class="column1"> <img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt=""> <img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt=""> </div> <div class="column1"> <img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt=""> <img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt=""> </div> </div>