coin-slider 是一个 jQuery 插件，可用于制作相册，实现多种切换效果。其特点包括：
?
下载地址：http://www.workshop.rs/projects/coin-slider
?
使用说明：
1. 引入 CSS 和 JS 文件
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/coin-slider.min.js"></script> <link rel="stylesheet" type="text/css" href="css/coin-slider-styles.css" />
?
2. 添加图片的展示区域
?
<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>
?
3. 定义 JS 函数
$(document).ready(function() {
$('#coin-slider').coinslider({
width: 599,
height: 175,
delay: 4000,
effect: "random",
navigation: true,
links: true
});
});
?
4. 效果预览
?
5. 改进
从上面的效果图可以看到，将鼠标移至图片区域时，会显示 prev 和 next 两个按钮，个人感觉这两个按钮看着让人实在不舒服，那么如何将其去掉或者隐藏呢？有两种方式可以实现。
首先一种是在 JS 函数中将 navigation 属性设置为 false，即可将其隐藏，但这同时也带来了一个副作用就是它会同时隐藏图片下方的小方框。如果在你的应用中需要隐藏图片下面的小方框，那么这种方式配置就很简单。
第二种方式是修改 coin-slider.min.js 文件。打开 coin-slider.min.js 文件，在 28 行找到：
<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'>prev</a> 和 <a href='#' id='cs-next-"+el.id+"' class='cs-next'>next</a>
将 prev 和 next 删掉即可。
如果大家还有其他更好的改进方式，欢迎指出。
?
?
?
-------------------------------------------------
Stay Hungry, Stay Foolish!
Afa
July 10th, 2010
-------------------------------------------------