注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery插件coin-slider马赛克幻灯片切换特效

jQuery插件 fishcity 904浏览

jQuery插件coin-slider马赛克幻灯片切换特效

这是一款有多个特效选择的马赛克幻灯片特效,一款相当不错的jquery插件,名字为coin-slider,不知道为什么起这样的名字,听起来怪怪的,金币幻灯,但不管名字怎么样,好用就行啦。怎么用呢?

1、引入核心文件到您的页面,一共有三个文件,样式文件与jquery库,另一个就是本插件了coin-slider

<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>

2、建立一个div,id随您定,这里用的是“coin-slider”,然后此DIV内放上图片和文字,图片张数不限,这里是5张。A标签内请放上您需要链接的地址,这里以#号取代了,具体的结构如下代码:

 <div id='coin-slider'>
    <a href="#" target="_blank">
      <img src='images/01.jpg' >
      <span>古老的城堡,美妙的山水</span>
    </a>
    <a href="#">
      <img src='images/02.jpg' >
      <span>地球的边缘,无尽的风光</span>
    </a>
    <a href="#">
      <img src='images/03.jpg' >
      <span>红红的枫叶美景目不接暇</span>
    </a>
    <a href="#">
      <img src='images/04.jpg' >
      <span>沙漠中的美女,一发不可收拾</span>
    </a>
     <a href="#">
      <img src='images/05.jpg' >
      <span>怒吼的猴子,啸声震动</span>
    </a>
  </div>

3、完成上面的工作,就可以调用coinslider函数来实现动画效果了,这里把所有的参数都列了出来,并加了简单的注释,具体参数效果请自己测试体验

$(document).ready(function() {
		$('#coin-slider').coinslider({
        width: 1000, // 幻灯面板的宽度
        height: 563, // 幻灯面板的高度
        spw: 7, // 小方块的宽度(切换时的小方块)
        sph: 5, // 小方块高度
        delay: 3000, // 切换等待时间
        sDelay: 30, // 切换所用时间
        opacity: 0.7, // 标题背景色的透明度
        titleSpeed: 500, // 标题出现的速度
        effect: '', // 采用的效果,可选random, swirl, rain, straight
        navigation: true, // 显示按钮
        links : true, // 图片带链接
        hoverPause: true // 鼠标悬浮时是否停止
      
      });
});

4、以上工作完成,页面已经可以工作了,美吧,帅吧,嗯,不要急着得意,下面有几个小地方得注意下:

a、spw和sph这个两参数的值不要设得太大,否则会引起莫名的错误

b、effect这个参数如果没有设置,那么默认会采用random方式

c、当您设置了宽后,标题的背条没有跟着变宽,这个时候您需要到coin-slider-styles.css文件中,找到类cs-title,把里面的width改为您需要的值

OK,这样就完美的完成了,得瑟下吧。

转载请注明:jQ酷 » jQuery插件coin-slider马赛克幻灯片切换特效

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。