jQuery图片轮播插件:jqFancyTransitions
又发现了一款不错的图片轮播插件,图片的切换效果还是很不错的,大家可以点击下面的链接预览:
http://www.iawen.com/Demo/jqFancyTransitions/demo.html
具体的使用方法,大家可以去插件的主要查看.
主页是:http://www.workshop.rs/projects/jqfancytransitions
这里简单的说明一下:
首先是包含脚本:
<script type="text/javascript" src="jquery-1.5.2.min.js"></script> <script type="text/javascript" src="jqFancyTransitions.1.8.min.js"></script>
其次是编写HTML代码:
<div id='slideshowHolder'>
<img src='1_b.jpg' alt='img1' />
<img src='2_b.jpg' alt='img2' />
<img src='3_b.jpg' alt='img3' />
<img src='4_b.jpg' alt='img4' />
</div>
最后就是调用了:
<script type="text/javascript">
$(function(){
$('#slideshowHolder').jqFancyTransitions({
effect: '', // wave, zipper, curtain
width: 500, // width of panel
height: 332, // height of panel
strips: 20, // number of strips
delay: 5000, // delay between images in ms
stripDelay: 50, // delay beetwen strips in ms
//titleOpacity: 0.7, // opacity of title
//titleSpeed: 1000, // speed of title appereance in ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: true, // prev and next navigation buttons
//links: false // show images as links
});
});
</script>