javascript - 单击显示属性淡化多个图像

Question

我试图通过简单地单击颜色按钮来更改产品图像的颜色，我对 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>

Answer 1

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>