Транзисторы при обмене изображениями

Question

Я просто сделал очень простой «imagelider», но он не скользит, поэтому позволяет называть его «imagewapper».

Хорошо. Мой вопрос теперь, как я могу заставить его вставлять и выдвигаться, чтобы он был плавным.

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

Есть много способов для достижения этого эффекта, один из способов для этого pplying 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>