逐渐放大图像的Javascript幻灯片

Question

我想要这样的东西：

`http://codepen.io/docode/pen/EjyVQY`. 

在这种情况下，我只关心这个幻灯片的缩放方面。如何在JS而不是CSS中实现同样的缩放效果？请记住，我希望放大发生在自己的身上。不是通过单击或其他事件处理程序。

谢谢你的帮助！)

更新:当宽度和高度保持不变时，必须实现缩放效果。

Answer 1

HTML：

<div id="slideshow">
<img src="http://docode.com.ua/wp-content/uploads/pictures/pic-3.jpg"/>
<img src="http://docode.com.ua/wp-content/uploads/pictures/pic-2.jpg"/>    
<img src="http://docode.com.ua/wp-content/uploads/pictures/pic-1.jpg"/>    
</div>

CSS：

#slideshow {
    width:100%;
    height:100%;
    position:fixed;


}

#slideshow img {
   width:100%;
    height:100%;
   display:block;
    left:0;
    top:0;
   position:absolute;
    opacity:0;

}

JQuery：

images = $('#slideshow img');

i = 0;
anima(i);
setInterval(function() {

  if (i < images.length - 1) {

    i++;

  } else {
    i = 0;

  }
  anima(i);
}, 15000);

function anima(i) {

  $(images).eq(i).fadeTo(100, 0.8);
  $(images).eq(i).animate({
    width: '150%',
    height: '150%',
    top: '-25%',
    left: '-25%',
    opacity: 1
  }, 15000, "linear", function() {
    $(this).fadeTo(1000, 0, function() {
      $(this).css('width', '100%');
      $(this).css('height', '100%');
      $(this).css('top', '0');
      $(this).css('left', '0');
    });

  });
}

演示：http://fiddle.jshell.net/sinisake/w0jz31uc/show/播放的值-加快它，或放慢它，改变宽度/高度动画，如果需要。这个可以转到全屏，但也可以放在页面上的某个容器中。