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