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>




posted @ 2012-03-28 22:19  coxsoft  阅读(582)  评论(0编辑  收藏  举报