javascript - 自动更改 <div> JQuery

Question

我的图标很少，当我点击一个图标时，另一个 div 上的图像发生变化，我可以通过点击更改图像，但我想自动更改图像，当用户点击一个图标时，它会显示那个图标。

编辑:用户单击正确的图标，大图像发生变化。想要在一个时间间隔内自动进行此更改，如果用户单击一个图标，也会更改它。

用户点击的图标

 <div class="col-md-3 laptopNormal">
                <div class="img-responsive">
                    <img class="hvr-grow wow fadeInLeft logoa wnormal" data-link="1" src="http://placehold.it/130x130">
                </div>
                <div class="img-responsive">
                    <img class="hvr-grow wow fadeInRight logoa wnormal" data-link="2" src="http://placehold.it/130x130">
                </div>
                <div class="img-responsive">
                    <img class="hvr-grow wow fadeInUp logoa wnormal" data-link="3" src="http://placehold.it/130x130">
                </div>
                <div class="img-responsive">
                    <img class="hvr-grow wow fadeInLeft logoa wnormal" data-link="4" src="http://placehold.it/130x130">
                </div>
                <div class="img-responsive">
                    <img class="hvr-grow wow fadeInRight logoa wnormal" data-link="5" src="http://placehold.it/130x130" >
                </div>
            </div>

点击时显示的图片

<div class="col-md-9">
                <div class="wow fadeInLeft twomacsbg" style="height: inherit;">
                    <img class="monitores wow fadeInRight iconsresp" data-link="1" src="http://placehold.it/130x130" >
                    <img class="monitores iconsresp" data-link="2" src="http://placehold.it/130x130" >
                    <img class="monitores  fadeInRight iconsresp" data-link="3" src="http://placehold.it/130x130" >
                    <img class="monitores  fadeInRight iconsresp" data-link="4" src="http://placehold.it/130x130" >
                    <img class="monitores  fadeInRight iconsresp" data-link="5" src="http://placehold.it/130x130" >
                </div>
            </div>

我的javascript

 $('.monitores:not(:nth-child(1))').hide();
    $('.logoa').click(
        function() {
            $('.monitores').hide();
            $('.monitores[data-link=' + $(this).data('link') + ']').fadeIn();
        });

Answer 1

将第一个图像设置为可见，将其余图像设置为不可见。然后将图像移动到开头以查看它们。在区间内，将第一个元素移到末尾。

window.setInterval( function(){
    var first = $(".monitores:first-of-type").remove();
    $(".monitores").parent().append(first);
}, 3000);

$(document).on("click",".logoa",function() {
     var element =  $('.monitores[data-link=' + $(this).attr('data-link') + ']').remove();
     $(".monitores").parent().prepend(element);
});

CSS:

.monitores{display:none;}
.monitores:first-of-type{display:block;}

淡入过渡的CSS:

.monitores{opacity: 0; transition: opacity 1s;}
.monitores:first-of-type{opacity: 1;}