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/ 玩转数值 - 加快或减慢速度，根据需要更改 width/height 动画。这个可以全屏，但也可以放在页面上的某个容器中。

Javascript 逐渐放大图片的幻灯片

Javascript slideshow that gradually zooms on image

javascript

jquery

html

css

zooming