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;}

Answer 2

使用以下代码：

$(document).on("click",".logoa",function() {
    $('.monitores').hide();
    $('.monitores[data-link=' + $(this).attr('data-link') + ']').fadeIn();
});

自动更改<div> JQuery

2 个答案: