jQuery图像转换插件

时间:2013-01-25 16:27:08

标签: jquery

我正在寻找一些简单的crossbrowser插件/功能,它可以将一个图像更改为其他图像,并具有一些平滑效果(fadeIn,fadeOut或opacity不是一个选项),代码:

<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>

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

2 个答案:

答案 0 :(得分:2)

http://canvasimg.sjeiti.com/

这组插件的重量约为22k(如果你去除不需要的过渡/缓和,则更少)

它提供了这些过渡:淡入淡出,缩放,擦除,折叠,翻转,百叶窗,圆形,方形,时钟,波浪,粒子,噪音,单面噪音,滴水。

它提供了这些缓和:线性,二次,立方,四次,五次,正弦,指数,圆形,弹性,后退,反弹。

您可以将图像与背景图像一起使用。 使用canvas元素可以获得最佳效果(canvas是所有现代浏览器/ android的跨浏览器,甚至pre-ie9与垫片兼容)

答案 1 :(得分:0)

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

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

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

只需看一下该滑块,就可以使用您想要的所有图像。我自己做了;)