我正在寻找一些简单的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>
有什么想法吗?我只能找到任何看起来不错的插件。我不需要任何复杂的滑块。
答案 0 :(得分:2)
这组插件的重量约为22k(如果你去除不需要的过渡/缓和,则更少)
它提供了这些过渡:淡入淡出,缩放,擦除,折叠,翻转,百叶窗,圆形,方形,时钟,波浪,粒子,噪音,单面噪音,滴水。
它提供了这些缓和:线性,二次,立方,四次,五次,正弦,指数,圆形,弹性,后退,反弹。
您可以将图像与背景图像一起使用。 使用canvas元素可以获得最佳效果(canvas是所有现代浏览器/ android的跨浏览器,甚至pre-ie9与垫片兼容)
答案 1 :(得分:0)
插件太重了,不能制作滑块,我做了这样的事情:http://jsfiddle.net/k9e5f/8/它可以给你一些想法来开发你自己的滑块。
我只使用一个图像和一个这样的div:
<div id="background_container">
<img id="changer" />
</div>
只需看一下该滑块,就可以使用您想要的所有图像。我自己做了;)