小清新的jQuery ck-slide 图片轮播
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 图片轮播的更多相关文章
- jQuery轻量级京东图片轮播代码等
http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码 查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...
- 使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
- JQuery插件开发初探——图片轮播
在熟悉了插件开发的结构以后,自己尝试着做了一个稍微复杂一点的小功能:图片轮播插件. 由于之前使用的一款图片轮播插件,性能不高,页面加载的时候需要载入全部的图片,因此速度很慢. 通过自己做这个小插件,能 ...
- JQuery slidebox实现图片轮播
jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...
- js/jquery中实现图片轮播
一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- JQuery简单实现图片轮播效果
很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...
- jquery视频展示 图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery实现页面图片轮播
1.创建一个html页面 <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...
随机推荐
- SSRS2:Reporting Service 配置Service Account
1,Service Account SSRS以一个Service方式实现,有三部分组成:Web Service,Report Manager和一个后台的进程,这个Service运行的账号就是Servi ...
- 通过Class获取标签,兼容的几种思路
在js中通过document.getElementsByClassName()在低版本IE浏览器中不兼容.然后我写了几种方案,大家可以参考参考. html代码 <!DOCTYPE html> ...
- 一个在ASP.NET中利用服务器控件GridView实现数据增删改查的例子
备注:这是我辅导的一个项目开发组的一个例子,用文章的方式分享出来,给更多的朋友参考.其实我们这几年的项目中,都不怎么使用服务器控件的形式了,而是更多的采用MVC这种开发模式.但是,如果项目的历史背景是 ...
- Express调用mssql驱动公共类dbHelper
直接上代码: /** * Created by chaozhou on 2015/9/18. */var mssql = require('mssql');var user = "sa&qu ...
- Lining.js - 为CSS提供 ::nth-Line 选择器功能
在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...
- APP数据接口开发的一些经验
刚接到这样的任务时,没有感觉到任何压力,不就是给移动端应用提供数据吗?那边发来参数,这边处理数据,返回JSON.做网站开发时经常使用ajax请求后台数据,不就是这么回事吗.于是,在确认完需求后就开始干 ...
- CaptureManagerSDK
Simple SDK for capturing, recording and streaming video and audio from web-cams on Windows OS by Win ...
- 倍数提高工作效率的 Android Studio 奇技
来源:JeremyHe 链接:http://zlv.me/posts/2015/07/13/14_android-studio-tips/ 这是从Philippe Breault的系列文章<An ...
- C++移位运算符
关于逻辑移位.算术移位可参见迅雷深大笔试题部分.的一道题. 以前看到C++标准上说,移位运算符(<<.>>)出界时的行为并不确定: The behavior is undefi ...
- C# ~ NUnit单元测试
单元测试 单元测试(Unit Test)的一个测试用例(Test Case)是一小段代码,用于测试一个小的程序功能的行为是否正常,保证开发的功能子项能正确完成并实现其基本功能.一个单元测试是用于判断某 ...