利用 coin-slider 制作相册

coin-slider 是一个 jQuery 插件，可用于制作相册，实现多种切换效果。其特点包括：

多种炫丽的切换效果

兼容多浏览器：Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+

方便安装和配置

自动幻灯片

导航提示

轻量级（仅8K）

图片链接

完全免费

完全自定义CSS样式表

 

下载地址：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
-------------------------------------------------