交换图像中的过渡

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>