ck_slide 是一款小清新的jQuery 幻灯片插件,它非常小巧,压缩后仅 3KB,基本功能可以满足。它支持淡入淡出/左右滚动、箭头/圆点控制、自动播放。

在线实例

默认(淡入淡出) 左右滚动 自动播放

使用方法

<div class="ck-slide"> 
    <ul class="ck-slide-wrapper"> 
        <li> 
            <a href="#"><img src="data:images/1.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>
$('.ck-slide').ckSlide();

  

参数详解

参数 描述 默认值
autoPlay 自动播放 false
dir 可选 ‘x’,即水平滚动,非 ‘x’ 为淡入淡出 -
isAnimate 是否开启动画效果 false

小清新的jQuery ck-slide 图片轮播的更多相关文章

  1. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

  2. 使用javascript,jquery实现的图片轮播功能

    使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...

  3. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  4. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

  5. JQuery插件开发初探——图片轮播

    在熟悉了插件开发的结构以后,自己尝试着做了一个稍微复杂一点的小功能:图片轮播插件. 由于之前使用的一款图片轮播插件,性能不高,页面加载的时候需要载入全部的图片,因此速度很慢. 通过自己做这个小插件,能 ...

  6. JQuery slidebox实现图片轮播

    jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...

  7. js/jquery中实现图片轮播

    一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  8. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  9. jquery视频展示 图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. jquery实现页面图片轮播

    1.创建一个html页面 <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...

随机推荐

  1. seajs模块化开发

    seajs是一个起辅助作用的库,所以它可以更方便开发,而它可以解决以下问题: 1.命名问题,就是冲突 2.性能问题,就是只要一个功能,但却使用一个大插件中的一个小功能,所以要手动拆分出这个功能 3.j ...

  2. 新浪微博SDK开发(2):上传图片的技术难点

    在微博模块中,有一个API是可以发表带一张图片的微博的,当然提交方式是POST.在封装的时候,可能会遇到一个难点——如何上传图片? 要POST微博的同时带有图片,POST的内容必须为MultiPart ...

  3. Struts2 DomainModel、ModelDriven接收参数

    一.DomainModel(域模型) 1. 应用场景:一般我们在struts2的action中接收参数通常是如下方式 package cn.orlion.user; import com.opensy ...

  4. ISO语言代码

    // Language ISO Code Abkhazian ab Afar aa Afrikaans af Albanian sq Amharic am Arabic ar Armenian hy ...

  5. poj2060Taxi Cab Scheme(二分图匹配)

    /* 题意: 出租车 有一个出发的时间,从点(a, b)到点(c, d),时间为 abs(a-c)+abs(b-d)! 一辆车可以在运完一个乘客后运另一个乘客, 条件是此车要在预约开始前一分钟之前到达 ...

  6. Deep learning:四十(龙星计划2013深度学习课程小总结)

    头脑一热,坐几十个小时的硬座北上去天津大学去听了门4天的深度学习课程,课程预先的计划内容见:http://cs.tju.edu.cn/web/courseIntro.html.上课老师为微软研究院的大 ...

  7. java类加载器-系统类加载器

    系统类加载器 系统类加载器可能都耳详能熟,但是为了完整点,还是先简单的说说系统的类加载器吧. public class Test { public static void main(String[] ...

  8. Windows Azure Virtual Machine (1) IaaS用户手册

    <Windows Azure Platform 系列文章目录> Azure IaaS用户手册  - Azure IaaS相关技术- Azure虚拟机成本分析- 创建Azure虚拟机- 使用 ...

  9. 20款精致的长阴影 LOGO 设计【附免费生成工具】

    长阴影(Long Shadow)概念来自于最新非常流行的扁平化设计(Flat Design).扁平化设计趋势影响最大的是用户界面元素和图标,但它也开始蔓延到其他网页设计的其他部分. 长阴影其实就是扩展 ...

  10. 【手把手教你全文检索】Lucene索引的【增、删、改、查】

    前言 搞检索的,应该多少都会了解Lucene一些,它开源而且简单上手,官方API足够编写些小DEMO.并且根据倒排索引,实现快速检索.本文就简单的实现增量添加索引,删除索引,通过关键字查询,以及更新索 ...