Coin Slider jQuery插件使用方法

Coin Slider这个jQuery插件可用于创建拥有独特滑块滑落效果的图片展播控件。
代码

1.在body里加入如下HTML代码：

<div class="coin_slider_container">
<div id="coin_slider">
<a href="#" target="_blank">
<img src="images/img_1.jpg" />
<span>美式柔软巧克力布朗尼蛋糕，散发香醇巧克力风味。</span>
</a>
<a href="#">
<img src="images/img_2.jpg" />
<span>甘醇巧克力制造，完全体验巧克力的甘、醇、香。</span>
</a>
<a href="#" target="_blank">
<img src="images/img_3.jpg" />
<span>外酥内软口感，尽是甘醇巧克力与奶香 。</span>
</a>
<a href="#" target="_blank">
<img src="images/img_4.jpg" />
<span>香草蛋糕与巧克力蛋糕的完美结合，配合奶油巧克力淋浇，香香甜甜你最爱 。</span>
</a>
</div>
</div>

2.在head标签内加入css：

<style type="text/css">
.coin_slider_container
{
border: 2px solid #dddddd;
padding: 2px;
width: 560px;
height: 200px;
overflow: hidden;
position: relative;
}
.coin_slider
{
width: 560px;
height: 200px;
overflow: hidden;
position: relative;
}
.coin_slider a
{
text-decoration: none;
outline: none;
border: none;
}
.cs-buttons
{
height: 20px;
position: absolute;
right: 8px;
bottom: 4px;
z-index: 1001;
}
.cs-buttons-a
{
background-color: #FCF2CF;
border: 1px solid #F47500;
color: #D94B01;
cursor: pointer;
float: left;
font-size: 12px;
height: 16px;
line-height: 16px;
margin-left: 3px;
text-align: center;
width: 16px;
text-decoration: none;
font-family:"宋体";
}
.cs-active
{
background-color: #ffb442;
color: #ffffff;
font-weight: bold;
}
.cs-title
{
background-color: #000000;
padding-left: 10px;
height: 26px;
line-height: 26px;
font-size: 12px;
width: 550px;
color: #FFFFFF;
}
</style>

3.在body底部引入js文件：

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>
<script src="http://img.china-dirs.com.cn/public/js/coin-slider.js" type="text/javascript"></script>

4.在body底部添加js代码：

<script type="text/javascript">
$(document).ready(function() {
$('#coin_slider').coinslider({
width: 560,//设置的宽度等于容器的宽度
height: 200,//设置的高度等于容器的高度
delay: 5000,//图片切换延迟
effect: "",//可以选4种切换效果，'random', 'swirl', 'rain', 'straight'，不写则为随机效果
navigation: true,//是否开启数字导航
links: true //是否对图片开启超链接
});
});
</script>