利用 coin-slider 制造相册

2012-11-23

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

利用 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. 效果预览

利用 coin-slider 制造相册

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
-------------------------------------------------

热点排行

Web前端

利用 coin-slider 制造相册