0

我正在寻找一些简单的跨浏览器插件/功能，可以将一个图像更改为另一个图像并具有一些平滑效果（淡入、淡出或不透明度不是一个选项），代码：

<script type="text/javascript" >
imgtimer = setInterval(function() {

  // this is something what I'm looking for:
 var from = $('.visible');
 var to = $('.visible').next('img');
 changeimg(from,to,effect);
  // some function that could be able to hide one image
  // and show other with some effect.

}, 5000);
</script>

<div id="images">
  <img src="img_01.jpg" class="visible" />
  <img src="img_02.jpg" />
  <img src="img_03.jpg" />
</div>

有任何想法吗？我只能找到任何看起来不错的插件。我不需要任何复杂的滑块。

4

2 回答 2

2

http://canvasimg.sjeiti.com/

这组插件的重量约为 22k 缩小（如果您去掉不需要的过渡/缓动，则更少）

它提供了这些过渡：淡入淡出、缩放、擦除、折叠、翻转、百叶窗、圆形、方形、时钟、波浪、粒子、噪声、simplexNoise、滴水。

它提供了这些缓动：线性、二次、三次、四次、五次、正弦、指数、圆形、弹性、返回、反弹。

您可以使用带有背景图像的图像。使用 canvas 元素可以获得最佳结果（canvas 是所有现代浏览器/android 的跨浏览器，甚至与 shim 兼容的 pre-ie9）

于 2013-01-25T18:28:20.730 回答
0

插件太重了，不能只做一个滑块，我做了这样的事情：http: //jsfiddle.net/k9e5f/8/它可以给你一些想法来开发你自己的滑块。

我只使用一个图像和一个 div 像这样： 

<div id="background_container">
    <img id="changer" />
</div>

看看那个滑块，它适用于你想要的所有图像。我自己做的 ;）

于 2013-01-25T17:18:30.767 回答