javascript - 带有显示属性的单击可淡化多张图像

我正在尝试简单地单击颜色按钮来更改产品图像的颜色，而我对javascript还是完全陌生的，但是我找到了这段代码，该代码可以让我在具有多个按钮的多个图像之间进行切换，但是我想获得单击时淡化它们。

例如，我在有2部iPhone的情况下进行了此操作，并且按钮与电话的颜色相对应（理想情况下，我希望有3种以上的选项）

function showImg( id ) {
    for ( i = 1; i < 10; i++) {
        var obj = document.getElementById( "picture" + i );
        if (obj != null)
        obj.className = 'hide';
    }

    var obj = document.getElementById( "picture" + id );
    if (obj != null)
    obj.className = 'show';

}

.show {
    display: block;
    opacity: 1;
    max-height: 100vh;
    margin: 0 auto;
    transition: ease-in-out 1s;
}

.hide {
    display: none;
    opacity:0;
    max-height: 100vh;
    margin: 0 auto;
    transition: ease-in-out 1s;
}

.btn {
    margin: 20px !important;
}

.black {
    background: #333;
    background: -webkit-linear-gradient(left top, #333, #555) !important;
    background: -o-linear-gradient(bottom right, #333, #555) !important;
    background: -moz-linear-gradient(bottom right, #333, #555) !important;
    background: linear-gradient(to bottom right, #333, #555) !important;
}

.silver {
    background: #ccc;
    background: -webkit-linear-gradient(left top, #ccc, #fff) !important;
    background: -o-linear-gradient(bottom right, #ccc, #fff) !important;
    background: -moz-linear-gradient(bottom right, #ccc, #fff) !important;
    background: linear-gradient(to bottom right, #ccc, #fff) !important;
}

<div class="container">
        <div class="row">
            <div class="col">
                <img id="picture1" src="https://images-na.ssl-images-amazon.com/images/I/515a5LWWpHL._SL1000_.jpg" title="Silver" class="show img-responsive">
                <img id="picture2" src="https://images-na.ssl-images-amazon.com/images/I/613bFC-bCvL._SL1500_.jpg" title="Black" class="hide img-responsive">
            </div>
            <div class="col">
                <button class="btn silver" onClick="showImg(1);" value="Silver"></button>
                <button class="btn black" onClick="showImg(2);" value="Black"></button>
            </div>
        </div>
    </div>

最佳答案

function showImg( id ) {
    for ( i = 1; i < 10; i++) {
        var obj = document.getElementById( "picture" + i );
        if (obj != null)
        obj.className = 'hide';
    }

    var obj = document.getElementById( "picture" + id );
    if (obj != null)
    obj.className = 'show';

}

.show {
    animation: fade-in 1s ease-in-out forwards;
}
@keyframes fade-in{
     0%{
          opacity:0;

       }
    100%{
          opacity:1;
       }
 }
 img{
     position:absolute;
     max-height: 100vh;
    left: 0;
    right: 0;
    margin: auto;
  }

.hide {
    animation: fade-out 1s ease-in-out forwards;
}
 @keyframes fade-out{
     0%{
          opacity:1;
       }
    100%{
          opacity:0;
       }
 }
.btn {
    margin: 20px !important;
}

.black {
    background: #333;
    background: -webkit-linear-gradient(left top, #333, #555) !important;
    background: -o-linear-gradient(bottom right, #333, #555) !important;
    background: -moz-linear-gradient(bottom right, #333, #555) !important;
    background: linear-gradient(to bottom right, #333, #555) !important;
}

.silver {
    background: #ccc;
    background: -webkit-linear-gradient(left top, #ccc, #fff) !important;
    background: -o-linear-gradient(bottom right, #ccc, #fff) !important;
    background: -moz-linear-gradient(bottom right, #ccc, #fff) !important;
    background: linear-gradient(to bottom right, #ccc, #fff) !important;
}

<div class="container">
        <div class="row">
            <div class="col">
                <img id="picture1" src="https://images-na.ssl-images-amazon.com/images/I/515a5LWWpHL._SL1000_.jpg" title="Silver" class="hide img-responsive">
                <img id="picture2" src="https://images-na.ssl-images-amazon.com/images/I/613bFC-bCvL._SL1500_.jpg" title="Black" class="img-responsive">
            </div>
            <div class="col">
                <button class="btn silver" onClick="showImg(1);" value="Silver"></button>
                <button class="btn black" onClick="showImg(2);" value="Black"></button>
            </div>
        </div>
    </div>

关于javascript - 带有显示属性的单击可淡化多张图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46355675/