多种切换过渡效果小巧jQuery图片幻灯片插件Coin Slider

Coin Slider是款很小巧，简单易用，具有多种图片过渡效果的jquery幻灯片插件。

使用方法：

下载插件：http://pan.baidu.com/s/1pJNriFD

引用文件：

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

添加HTML代码：

<div id='coin-slider'>
    <a href="img01_url" target="_blank">
        <img src='img01.jpg' >
        <span>
            Description for img01
        </span>
    </a>    
    <a href="imgN_url">
        <img src='imgN.jpg' >
        <span>
            Description for imgN
        </span>
    </a>
</div>

有多张图片，就复制多份以下代码，修改图片url或文字：

<a href="imgN_url">
	<img src='imgN.jpg' >
	<span>
		Description for imgN
	</span>
</a>

添加javascript代码：

<script type="text/javascript">
    $(document).ready(function() {
        $('#coin-slider').coinslider();
    });
</script>

coinslder后台的括号是插件的参数，Coin slider插件有以下参数：

width: 565, // 幻灯片的宽度
height: 290, // 幻灯片的高度
spw: 7, // 焦点矩形的宽度
sph: 5, // 焦点矩形的高度
delay: 3000, // 图片过渡的时间，毫秒
sDelay: 30, // 焦点矩形的过渡时间，毫秒
opacity: 0.7, // 标题的背景透明度
titleSpeed: 500, // 标题显示出来需要的时间，毫毛
effect: '', // 过渡效果，四种：random, swirl, rain, straight
navigation: true, // 是否显示前一张、后一张切换按钮，true或false
links : true, // 是否显示图片超链接，true或false
hoverPause: true // 是否悬停

示例：

<script type="text/javascript">
    $(document).ready(function() {
        $('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
    });
</script>

演示地址：http://workshop.rs/projects/coin-slider/