简单的jQuery幻灯片插件-ck_slide.js

 Array   高蒙   阅读(1110)   评论(0)   2016-12-14 16:20:59    jQuery插件 ck_slide.js 


ck_slide 是一款国产的 jQuery 幻灯片插件,它非常小巧,压缩后仅 3KB,所以它的功能也不算丰富,但一般使用已经够了。它支持淡入淡出/左右滚动、箭头/圆点控制、自动播放。

使用方法

1、引入文件

<link rel="stylesheet" href="css/slide.css">
<script src="js/jquery.js"></script>
<script src="js/slide.js"></script>

2、HTML

<div class="ck-slide">
    <ul class="ck-slide-wrapper">
        <li>
            <a href="javascript:"><img src="images/1.jpg" alt=""></a>
        </li>
        <li style="display:none">
            <a href="javascript:"><img src="images/2.jpg" alt=""></a>
        </li>
        <li style="display:none">
            <a href="javascript:"><img src="images/3.jpg" alt=""></a>
        </li>
        <li style="display:none">
            <a href="javascript:"><img src="images/4.jpg" alt=""></a>
        </li>
        <li style="display:none">
            <a href="javascript:"><img src="images/5.jpg" alt=""></a>
        </li>
    </ul>

    <a href="javascript:" class="ctrl-slide ck-prev">上一张</a> <a href="javascript:" class="ctrl-slide ck-next">下一张</a>
    
    <div class="ck-slidebox">
        <div class="slideWrap">
            <ul class="dot-wrap">
                <li class="current"><em>1</em></li>
                <li><em>2</em></li>
                <li><em>3</em></li>
                <li><em>4</em></li>
                <li><em>5</em></li>
            </ul>
        </div>
    </div>
</div>

3、JavaScript

$('.ck-slide').ckSlide();

配置

属性/方法类型默认值说明
autoPlay布尔值false自动播放
dir字符串null可选 ‘x’,即水平滚动,非 ‘x’ 为淡入淡出
isAnimate布尔值false



相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客