Question

我制作了一系列在网页上切换的图片，但他们只是在每张图片之间剪切。是否有一种简单的方法可以淡化下一张图像而不是突然改变它？

var numImages = 9;

var imageArr = new Array(numImages);

for (var i = 1; i <= numImages; i++) {
    imageArr[i] = new Image();
    imageArr[i].src = "slideImages/image" + i + ".jpg";
}
var cnt = 1;

//change image when its clicked
document.getElementById("idSlides").onclick = function() {
    changeImage();
};

//toggle through images
function slide() {
    changeImage();
    if (cnt < numImages) {
        cnt++;
    } else {
        cnt = 1;
    }
    this.setTimeout("slide()", 2300);
}

function changeImage() {
    var img = imageArr[cnt];
    document.images.slide.src = img.src;

}
slide();

Answer 1

随时间更改图像的不透明度。

查看this link，详细了解如何做您想做的事。

Answer 2

我认为你想要这些内容：

function fade(img){
    var opacity = 0;
    var fade;
    fade = setInterval(function(){
        img.style.opacity = '0.'+opacity;
        opacity++;
        console.log(opacity);
        if(opacity === 9){
            img.style.opacity = 1;
            clearTimeout(fade);
        }
    }, 100);
}

根据您的解决方案，这是一个工作小提琴：http://jsfiddle.net/T2Y3U/1/

Answer 3

也许其他人会觉得这很有用。这是一个非常好用的纯CSS3 / JavaScript解决方案。为IE / Safari / Moz添加正确的eventlistener需要做一些额外的工作。适用于chrome：）

<强> CSS：

img
{
  width:100px;
  height:100px;
  position:absolute;
}
.fadeIn
{
  -webkit-animation:simpleFadeIn 2s;
  animation:simpleFadeIn 2s;
  opacity:0;
}
.fadeOut
{
  -webkit-animation:simpleFadeOut 2s;
  animation:simpleFadeOut 2s;
}
.container
{
  width:100px;
  height:100px;
  border:1px solid black;
}

.hidden
{
  display:none;
}

@-webkit-keyframes simpleFadeIn
{
0%   {opacity:0;}
100%  {opacity:1;}
}

@-webkit-keyframes simpleFadeOut
{
0%   {opacity:1;}
100%  {opacity:0;}
}

<强> HTML：

<div class='container'>
    <img src="http://www.fillmurray.com/100/100"
         class='square'></img>
  <img src="http://www.fillmurray.com/100/101"
         class='hidden'></img>
  <img src="http://www.fillmurray.com/100/102"
         class='hidden'></img>
  <img src="http://www.fillmurray.com/100/103"
         class='hidden'></img>
  <img src="http://www.fillmurray.com/100/104"
         class='hidden'></img>
  </div>

<强> JavaScript的：

(function()
{
var animating = false;
var currentImage;
var nextImage;

var currentIndex = 0;

var images = document.querySelectorAll('img');
var container = document.querySelector('.container');

container.addEventListener('click', function()
{
  cycleImage();
});

function cycleImage()
{
  if(animating === false)
    {
      animating = true;
      currentImage = images[currentIndex];

      currentIndex = (currentIndex+1) % images.length;

      nextImage = images[currentIndex];

  //Begin fading out
      currentImage.classList.add('fadeOut');

  //Hide div once image completes
      currentImage.addEventListener('webkitAnimationEnd', fadeOutComplete);

  //Unhide image
      nextImage.classList.remove('hidden');
      nextImage.classList.add('fadeIn');     

      nextImage.addEventListener('webkitAnimationEnd', fadeInComplete);
    }

}
function fadeOutComplete()
{
    this.removeEventListener('webkitAnimationEnd', fadeOutComplete);
    this.classList.remove('fadeOut');
    this.classList.add('hidden');
    animating = false;
}
function fadeInComplete()
{
   this.removeEventListener('webkitAnimationEnd', fadeInComplete);
   this.classList.remove('fadeIn');
}
})(window);

http://jsbin.com/roluzenu/1/edit

淡化图像javascript

3 个答案: