SlidesJs(輪播支持觸屏)――官網(http://slidesjs.com)
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 id="slides"><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 class="slidesjs-previous slidesjs-navigation" href="#" title="Previous">Previous</a><a class="slidesjs-next slidesjs-navigation" href="#" title="Next">Next</a> $("#slides").slidesjs({navigation: {active: true, //顯示或隱藏前一張后一張切換按鈕;默認值為true,effect: "slide" //設置切換的方式,slide:平滑,fade:漸顯;默認值slide}}); 4.設置分頁切換
可以自定樣式:
<ul class="slidesjs-pagination"> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="0" class="active">1</a></li> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="1">2</a></li> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="2">3</a></li> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="3">4</a></li></ul> $("#slides").slidesjs({pagination: {active: true, //顯示或隱藏 分頁;默認值trueeffect: "slide" //這里可以設置切換方式,跟上下頁切換一樣,但是跟上下頁不沖突;默認值slide}}); 5.自動播放
可以自定樣式:
<a class="slidesjs-play slidesjs-navigation slidesjs-playing" href="#" title="Play" style="display: none;">Play</a><a class="slidesjs-stop slidesjs-navigation" href="#" title="Stop" style="">Stop</a> $("#slides").slidesjs({play: {active: true, //開始自動播放功能;默認值trueeffect: "slide", //切換方式,跟上面兩個切換方式不沖突;默認值slideinterval: 5000, //在每一個幻燈片上花費的時間;默認值5000auto: false, //開始自動播放;默認值falseswap: true, //顯示或隱藏 自動播放和停止按鈕;默認值truepauseOnHover: false, //鼠標移入是否暫停;默認值falserestartDelay: 2500 //重啟延遲;默認值2500}}); 6.效果配置
$("#slides").slidesjs({ effect: {slide: {speed: 200 //切換花費的時間;默認值200},fade: {speed: 300, //切換花費的時間;默認值300crossfade: true //交叉切換,設置為false,會看到背景色;默認值true}}}); 7.回調函數
$("#slides").slidesjs({callback: {loaded: function(number) {// 幻燈片載入完成時},start: function(number) {// 切換開始時},complete: function(number) {// 切換結束時}}});validation(表單驗證)――官網(http://jqueryvalidation.org)
以下是針對:jQuery Validation Plugin - v1.15.0 - 2/24/2016 版本
注意:jquery Vaildation Engine 跟以下講的不是同一款插件
示例:
<form action="" id="demo"><label for="username">用戶名</label><input type="text" name="username" id="username"><br/><label for="password">密碼</label><input type="text" name="password" id="password"><br/><label for="password_confirm">確認密碼</label><input type="text" name="password_confirm"><br/><label for="email">email</label><input type="text" name="email"><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", //設置錯誤標簽 berrorPlacement: 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方法