Question

我正在尝试使用一系列其他图像更改现有图像的src。我有这个工作，但过渡是可怕的，根本不顺利。我想这是因为它在初始图像消失后而不是同时突然加载新图像。

有没有聪明的方法让这种转变完全顺利？

var images = new Array ('image1.jpg', 'image2.jpg', 'image3.jpg');
var index = 1;

function rotateImage()
{
  $('.Parallax-host').children(':first-child').find('.Index-page-image img').fadeTo(1000,0.30, function() 
{
$(this).attr('src', images[index]);

$(this).fadeTo(500,1, function() 
{
  if (index == images.length-1)
  {
    index = 0;
  }
  else
  {
    index++;
  }
});
});
} 

$(document).ready(function()
{
 setInterval (rotateImage, 5000);
});

我无法访问此处的标记，因此它只需要一个jquery解决方案。

Answer 1

这里有一些让你入门的东西。

＆＃13;

const images = ["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQnY5_NI7cYhnEqnNWcyX29B6x71CmUp1Xs_uFCkIrWEzuBhXf","https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg","https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350"];
let curImage = 0;
function rotateImage(){
  let next = document.createElement('img');
  next.onload = function(e){//wait for the image to load
    document.getElementById('img_container').insertBefore(next, document.querySelector("#img_container img"));//insert new image before the previous (for stacking order)
    $('#img_container img').eq(1).fadeOut(1500, function(){
      $(this).detach();//remove the faded out img
    });
  };
  next.src = images[curImage];
  curImage = (curImage + 1) % images.length;
}
setInterval(rotateImage, 5000);

＆＃13;

#img_container{
  width:300px;
  height:300px;
  position:relative;
  overflow:hidden;
}
#img_container img{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  min-width:100%;
  min-height:100%;
  margin:auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='img_container'>
  <img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" />
</div>

＆＃13;

通过平滑过渡更改图像src

1 个答案: