jQuery插件学习教程之SlidesJs轮播+Validation验证_H5之家

SlidesJs（轮播支持触屏）——官网（）

1.简介

SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件。支持键盘，触摸，css3转换。

2.代码

<!doctype html> <head> <style> /* Prevents slides from flashing */ #slides { display:none; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="jquery.slides.min.js"></script> <script> $(function(){ $("#slides").slidesjs({ width: 940, height: 528 }); }); </script> </head> <body> <div> <img src="http://placehold.it/940x528"> <img src="http://placehold.it/940x528"> <img src="http://placehold.it/940x528"> <img src="http://placehold.it/940x528"> <img src="http://placehold.it/940x528"> </div> </body>

API简介

1.设置轮播的宽高（默认值都为 auto）

$("#slides").slidesjs({ width: 700, height: 393 });

2.设置从那张开始（默认值为 1）

$("#slides").slidesjs({ start: 3 //这里注意数值从1开始，不是0；默认值0 });

3.设置上下切换按钮

可以自定样式：

<a href="#" title="Previous">Previous</a> <a href="#" title="Next">Next</a> $("#slides").slidesjs({ navigation: { active: true,　　//显示或隐藏前一张后一张切换按钮；默认值为true, effect: "slide"　　//设置切换的方式，slide:平滑，fade:渐显；默认值slide } });

4.设置分页切换

可以自定样式：

<ul>　　<li><a href="#" data-slidesjs-item="0">1</a></li>　　<li><a href="#" data-slidesjs-item="1">2</a></li>　　<li><a href="#" data-slidesjs-item="2">3</a></li>　　<li><a href="#" data-slidesjs-item="3">4</a></li></ul> $("#slides").slidesjs({ pagination: { active: true,　　//显示或隐藏分页；默认值true effect: "slide"　　//这里可以设置切换方式，跟上下页切换一样，但是跟上下页不冲突；默认值slide } });

5.自动播放

可以自定样式：

<a href="#" title="Play">Play</a> <a href="#" title="Stop">Stop</a> $("#slides").slidesjs({ play: { active: true,　　　　//开始自动播放功能；默认值true effect: "slide",　　//切换方式，跟上面两个切换方式不冲突；默认值slide interval: 5000,　　　//在每一个幻灯片上花费的时间；默认值5000 auto: false,　　　　　//开始自动播放；默认值false swap: true,　　　　　　//显示或隐藏自动播放和停止按钮；默认值true pauseOnHover: false,　　//鼠标移入是否暂停；默认值false restartDelay: 2500　　//重启延迟；默认值2500 } });

6.效果配置

$("#slides").slidesjs({　　effect: { slide: { speed: 200　　//切换花费的时间；默认值200 }, fade: { speed: 300,　　//切换花费的时间；默认值300 crossfade: true　　//交叉切换，设置为false,会看到背景色；默认值true } } });

7.回调函数

$("#slides").slidesjs({ callback: { loaded: function(number) { // 幻灯片载入完成时 }, start: function(number) { // 切换开始时 }, complete: function(number) { // 切换结束时 } } });

validation（表单验证）——官网（）

以下是针对：jQuery Validation Plugin - v1.15.0 - 2/24/2016 版本

注意：jquery Vaildation Engine 跟以下讲的不是同一款插件

示例：

<form action=""> <label for="username">用户名</label><input type="text"><br/> <label for="password">密码</label><input type="text"><br/> <label for="password_confirm">确认密码</label><input type="text"><br/> <label for="email">email</label><input type="text"><br/> <input type="submit" value="提交"> </form> <script> $(function(){ $('#demo').validate({ rules: {　　　　　　　　　　　　　　　　　　　　//规则 username: {　　　　　　　　　　　　　　　　//这边的username，取得是form里面 name的值 required: true,　　　　　　　　　　　//必填项 minlength: 2,　　　　　　　　　　　　//最小长度 remote: "http://taojiaqu.com"　　 //url验证配对，只能返回true或false }, password: { required: true, minlength: 5 }, password_confirm: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true, remote: "http://taojiaqu.com" } }, messages: {　　　　　　　　　　　　　　　　//错误显示，跟上面的一一对应，没有设置的话，会显示默认的 username: { required: '请输入用户名', minlength: '用户名最小为2', remote: "该用户名被使用了" }, password: { required: '请输入密码', minlength: '密码最小长度为5' }, password_confirm: { required: '请确认密码', minlength: '密码最小长度为5', equalTo: "两次密码不一致" }, email: { required: '请输入邮箱', email: '您输入的邮箱不对', remote: '该邮箱已被实用' } }, errorElement: "b",　　//设置错误标签 b errorPlacement: function(error, element) {　　　　　　　　　　　　//错误操作，error错误信息，element错误input对象 element.after(error); }, submitHandler: function() {　　　　　　　　　　　　//点击提交表单回调函数，如果还有验证不通过择提示错误信息，不执行该函数 }, success: function(label,element) {　　　　　　　　　　　　//验证通过的函数　　　　　　　　　　　　//element：input对象　　　　　　　　　　　　//labal：提示信息的对象 }, highlight: function(element, errorClass, validClass) {　　　　　　　　　　　　//上一个验证不通过的话，执行该函数　　　　　　　　　　　　//element：input对象　　　　　　　　　　　　//errorClass：错误class类名　　　　　　　　　　　　//validClass: 确认class类名 }, unhighlight:function(element, errorClass, validClass){ 　　　　　　　　　　　　//上一个验证通过的话，执行该函数 } }) }) </script>

API

1.1方法