交換圖像

Question

我只是做了一個非常簡單的「imageslider」，但它不滑動，所以我們稱之爲「imageswapper」。

好的。我的問題是現在，我怎樣才能讓它滑入並滑出來，這樣就順利了。

JSFIDDLE

[JS]

document.getElementById('atwo').style.display = "none"; 
    function ImgSwap(){ 
     if(document.getElementById('one').style.display == "block"){ 
     document.getElementById('one').style.display = "none"; 
     document.getElementById('two').style.display = "block"; 
     }else{ 
     document.getElementById('two').style.display = "none"; 
     document.getElementById('one').style.display = "block"; 
     } 
    } 

[HTML]

<div id="wrapper"> 
<a onclick="ImgSwap()" id="aone"><img src="one.jpg" alt="one" class="img" id="one" /></a> 
<a onclick="ImgSwap()" id="atwo"><img src="two.gif" alt="two" class="img" id="two" /></a> 
</div> 

[CSS]

 img.img 
    { 
     height: 200px; 
     width: 300px; 
    } 
    #one 
    { 
     display: block; 
    } 
    #two 
    { 
     display:none; 
    } 
    a:hover 
    { 
     cursor: pointer; 
    } 
    div#wrapper 
    { 
     width: 300px; 
    } 

Answer 1

有很多種方法來實現這一效果，一個方法這是通過一個將css轉換到你的css類。您可以更改圖像的不透明度和位置以創建有效的幻燈片。

function ImgSwap() { 
 
    document.getElementById('one').classList.toggle('show'); 
 
    document.getElementById('two').classList.toggle('show'); 
 
}

div#wrapper { 
 
    width: 300px; 
 
    height: 200px; 
 
    position: relative; 
 
    background-color: black; 
 
} 
 
.img { 
 
    height: 200px; 
 
    width: 300px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: -300px; 
 
    opacity: 0; 
 
} 
 
a:hover { 
 
    cursor: pointer; 
 
} 
 
.show { 
 
    left: 0; 
 
    opacity: 1; 
 
    transition: left 1s; 
 
}

<div id="wrapper"> 
 
    <a onclick="ImgSwap()" id="aone"> 
 
    <img src="https://c2.staticflickr.com/6/5120/5824578555_d239d42195_b.jpg" alt="one" class="img show" id="one" /> 
 
    </a> 
 
    <a onclick="ImgSwap()" id="atwo"> 
 
    <img src="http://petsadviser.supercopyeditors.netdna-cdn.com/wp-content/uploads/2012/06/why-is-cat-scared-rain-thunder.png" alt="two" class="img" id="two" /> 
 
    </a> 
 
</div>