Javascript图像滑块转换

Question

I'm looking for a code, which adds a transition after the picture changes. 我正在寻找一个代码，它会在图片更改后添加一个转换。 Here's my code: 这是我的代码：

<script type = "text/javascript">
    function displayNextImage() {
        x = (x === images.length - 1) ? 0 : x + 1;
        document.getElementById("img").src = images[x];
    }

    function displayPreviousImage() {
        x = (x <= 0) ? images.length - 1 : x - 1;
        document.getElementById("img").src = images[x];
    }

    function startTimer() {
        setInterval(displayNextImage, 3000);
    }

var images = [], x = -1;
images[0] = "1.jpg";
images[1] = "2.jpg";
images[2] = "3.jpg";
</script>

<body onload = "startTimer()">
<img id="img" src="1.jpg"/>
</body>

Is there any possible way to add some transition when the code changes the image? 当代码更改图像时，是否有任何可能的方法来添加一些转换？

Answer 1

Roughly for example a fadeIn effect must be: 例如，fadeIn效果必须是：

function fadeIn(elementId, miliseconds) {
  var el = document.getElementById(elementId);
  el.style.opacity = 0;
  var op = parseFloat(0);

  var timer = setInterval(function() {
    if (op >= 1.0)
      clearInterval(timer);

    op += 0.1;
    el.style.opacity = op;
  }, miliseconds);
}

Here you have a working example with your code and some additions 这里有一个包含代码和一些附加功能的工作示例

Javascript图像滑块转换

问题描述

1 个解决方案

解决方案1
0 2016-06-17 11:06:37

Javascript图像滑块转换

问题描述

1 个解决方案

解决方案1 0 2016-06-17 11:06:37

解决方案1
0 2016-06-17 11:06:37