bower install lockr

cnpm i lockr --save

<script src="/path/lockr.js" type="text/javascript"></script>

Lockr.prefix?- String

Lockr.prefix = 'lockr';

Lockr.set('username', 'Coyote'); 

localStorage.getItem('username');

localStorage.getItem('lockr_username');

Lockr.set?- :?[ key, value ]?{String, Number, Array or Object}

Lockr.set('username', 'Coyote'); // String

Lockr.set('user_id', 12345); // number

Lockr.set('users', [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]);

Lockr.get?- :?[ key ?/ ?hash_key ， 默认值 ]

Lockr.get('username');

> "Coyote"



Lockr.get('user_id');

> 12345



Lockr.get('users');

>  [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]



Lockr.get('score', 0):

> 0

//不存在返回设置的默认值0

Lockr.set('score', 3):

Lockr.get('score', 0):

> 3

Lockr.rm?- arguments:?[ key ]?{String}

Lockr.set('username', 'Coyote');

Lockr.get('username');

> "Coyote"

Lockr.rm('username');

Lockr.get('username');

> undefined

Lockr.sadd?- arguments?[ key, value ]{String, Number, Array or Object}

Lockr.sadd("wat", 1); // [1]

Lockr.sadd("wat", 2); // [1, 2]

Lockr.sadd("wat", 1); // [1, 2]

Lockr.sismember?- arguments?[ key, value ]

Lockr.sadd("wat", 1);

Lockr.sismember("wat", 1); // true

Lockr.sismember("wat", 2); // false

Lockr.smembers?- arguments?[ key ]

Lockr.sadd("wat", 42);

Lockr.sadd("wat", 1337);

Lockr.smembers("wat"); // [42, 1337]

Lockr.srem?- arguments?[ key, value ]

Lockr.sadd("wat", 1);

Lockr.sadd("wat", 2);

Lockr.srem("wat", 1);

Lockr.smembers("wat"); // [2]

Lockr.getAll?- arguments:?null

Lockr.getAll();

> ["Coyote", 12345, [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]]

Lockr.getAll(true);

> [{"username": "Coyote"}, {"user_id": 12345}, {"users": [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]}]

Lockr.flush()?- arguments:?null

localStorage.length;

> 3

Lockr.flush();

localStorage.length;

> 0

@charset "utf-8";

html{

	-webkit-text-size-adjust:none;

	-webkit-user-select:none;

	-webkit-touch-callout: none;

	font-family: Microsoft YaHei,'宋体' , Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;

	font-size:24px;

}

body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{

	margin:0; 

	padding:0; 

	font-weight: normal;

}

a,button,input,textarea,select{ 

	background: none; 

	-webkit-tap-highlight-color:rgba(255,0,0,0); 

	outline:none; 

	-webkit-appearance:none;

}

ol,ul{

	list-style:none;

}

a{

	text-decoration:none;

}

img{

	border:none; 

	text-decoration: none; 

}

table{

	border-collapse:collapse;

	border-spacing: 0;

}

textarea{ 

	resize:none; 

	overflow:auto;

}

.clearfix{ 

    zoom:1; 

}

.clearfix:after {

    clear:both;

    display:block;

    height:0;

    content:"";

    visibility:hidden;

}

.no-wrap-ellipsis{ 

	white-space:nowrap; 

	overflow:hidden; 

	text-overflow:ellipsis;

}

.text-justify{ 

	text-align:justify;

	text-justify:inter-ideograph;

}

@media screen and (orientation: portrait) {

/*竖屏 css*/

}

@media screen and (orientation: landscape) {

/*横屏 css*/

}

.text-nocopy {

	-webkit-touch-callout:none;

	-webkit-user-select:none;

	-khtml-user-select:none;

	-moz-user-select:none;

	-ms-user-select:none;

	user-select:none;

}

.text-copy{

	-webkit-touch-callout:text;

	-webkit-user-select:text;

	-moz-user-select:text;

	-ms-user-select:text;

	user-select:text;

}

html{-webkit-user-select:none;}

html{-webkit-touch-callout: none;}

input{-webkit-appearance:none;}

input::-webkit-input-placeholder{color:#123456;}

input:focus::-webkit-input-placeholder{color:#654321;}

a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}

body{-webkit-text-size-adjust: 100%!important;}

input::-webkit-input-speech-button {display: none;}

font-family:'\5FAE\8F6F\96C5\9ED1',tahoma,'\5b8b\4f53',"Helvetica Neue",Helvetica,Arial,sans-serif;

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">

<meta name="format-detection" content="telephone=no" />

<meta name="format-detection" content="email=no" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

	<meta content="yes" name="apple-mobile-web-app-capable">

	<meta content="black" name="apple-mobile-web-app-status-bar-style">

	<meta content="telephone=no" name="format-detection">

	<meta content="email=no" name="format-detection">

	<title>Document</title>

</head>

<body>

    content...

</body>

</html>

<div id="masonry" class="container-fluid">

 

    <div class="thumbnail">

        <div class="imgs">

            <img src="" />

        </div>

        <div class="caption">

            <div class="title"></div>

            <div class="content">

                 

            </div>

        </div>

    </div>

     

</div>

<script>

    $(function() {

     

        var masonryNode = $('#masonry');

        masonryNode.imagesLoaded(function(){

            masonryNode.masonry({

                itemSelector: '.thumbnail',

                isFitWidth: true

            });

        });

         

         

    });

</script>

// 首先将新元素添加到页面容器中

 

masonryNode.append(newItems);

// 等待新元素中的图片加载完毕

newItems.imagesLoaded(function(){

 

// 调用瀑布流布局的appended方法

    masonryNode.masonry('appended',  newItems);

});

$(window).scroll(function() {

                 

    if($(document).height() - $(window).height() - $(document).scrollTop() < 10) {

         

        if(!imagesLoading) {

            appendToMasonry();

        }

         

    }

     

});

• 固定每一个item的宽度
• 根据父级绝对定位
• js计算每一行可以排列几个 （父级总宽度 / item）= 排列个数
• 写一个空数组 循环保存每一行的下标高度
• 循环所有item获取当前行最小的高度和索引，改变当前的left和top会用到
• left的值就是当前索引*item的宽度
• top的值就是当前索引的高度
• 计算完以后重置当前索引的高度elHeight[minIndex]+= 当前的高度，依次循环就可以了
• 浏览器缩放时添加一个resize再从第三部重新计算宽度，然后循环数据，调整样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Waterfall flow</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body {

            font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;

            font-size: 14px;

        }

        .clearfix:after{

            content: "";

            display: block;

            clear: both;

        }

        input,button,select,textarea{

            outline:none;border: none;

        }

        a{

            text-decoration: none;

        }

        ul,li{

            list-style: none;

        }

        img{

            border: none;

        }

        .wrap {

            position: relative;

            min-width: 440px;

            width: 90%;

            margin: 0 auto;

        }

        .item {

            width: 200px;

            margin: 10px;

            position: absolute;

            transition: all .6s ease-out;

            font-size: 50px;

            color: #fff;

            text-align: center;

        }

    </style>

</head>

<body>

<div class="wrap"></div>

<script src="https://cdn.bootcss.com/jquery ... gt%3B

<script>

var WaterFall = {

    init: function(){

        // 添加 item 盒子

        this.addItem();

        // 添加好盒子就开始布局

        this.layout();

        // 改变窗口时执行

        this.resize();

    },

    addItem: function(){

        var wrap = $('.wrap');

        // 生成30个div 随机高度 和 颜色

        var item = '';

        for (var i = 0; i < 30; i++) {

            item +='<div class="item" style="height:'+parseInt(Math.random() * 100 + 230)+'px;background-color:'+this.getRandColor()+'">'+i+'</div>';

        }

        wrap.append(item);

    },

    layout: function(){

        var elHeight = [];

        // 计算每一行可以存放几个 item 总宽 / item宽度

        var countWidth =  Math.floor( $('.wrap').width() / $('.item').width()); 

        // 初始化添加 第一行高度的下标  

        for (var i = 0; i < countWidth; i++) {

            elHeight[i] = 0;

        }

        // 循环 所有item  

        $('.item').each(function(index, el) {

            // apply 传入数组 取得最小的高度

            var minValue = Math.min.apply(null, elHeight);

            console.log(minValue)

            // 然后获取当前高度的索引

            var minIndex = elHeight.indexOf(minValue)

            // 修改当前的top 和 left 

            $(this).css({

                top: elHeight[minIndex],    // 获取当前索引对应的高度

                left: $(this).outerWidth(true) * minIndex    // 当前的left值为 索引 * 宽度（位于第几个）

            })

            // 当前索引的高度 += 当前 item 的高度 （比如计算第二排高度时， 就等于上一个的 top + 当前的高度）elHeight[0] += 90  下一次高度就为90 

            elHeight[minIndex] += $(this).outerHeight(true);

        });

    },

    resize: function(){

        $(window).resize(function() {

            WaterFall.layout();

        });

    },

    getRandColor: function(){

        var str = '1234567890abcdef';

        var colorStr = '#';

        for(var i =0; i < 6; i++){

            colorStr += str[ Math.floor(Math.random() * str.length) ];

        }

        return colorStr;

    }

}

WaterFall.init(); // 执行

</script>

</body>

</html>

{

? "name": "qdcenter",

? "version": "1.0.0",

? "description": "qiduo new user center",

? "author": "lopo <lopo1983@foxmail.com>",

? "private": true,

? "scripts": {

? ? "dev": "node build/dev-server.js",

? ? "start": "node build/dev-server.js",

? ? "build": "node build/build.js"

? },

? "dependencies": {

? ? "vue": "^2.2.6",

? ? "vue-router": "^2.3.1"

? },

? "devDependencies": {

? ? "animate.css": "^3.5.2",

? ? "autoprefixer": "^6.7.2",

? ? "available": "^2.0.3",

? ? "axios": "^0.15.3",

? ? "babel-core": "^6.22.1",

? ? "babel-loader": "^6.2.10",

? ? "babel-plugin-transform-runtime": "^6.22.0",

? ? "babel-polyfill": "^6.23.0",

? ? "babel-preset-env": "^1.2.1",

? ? "babel-preset-stage-2": "^6.22.0",

? ? "babel-register": "^6.22.0",

? ? "bce-sdk-js": "^0.2.7",

? ? "bootstrap": "^3.3.7",

? ? "chalk": "^1.1.3",

? ? "connect-history-api-fallback": "^1.3.0",

? ? "copy-webpack-plugin": "^4.0.1",

? ? "css-loader": "^0.26.1",

? ? "echarts": "^3.6.1",

? ? "eventsource-polyfill": "^0.9.6",

? ? "express": "^4.14.1",

? ? "extract-text-webpack-plugin": "^2.0.0",

? ? "file-loader": "^0.10.1",

? ? "friendly-errors-webpack-plugin": "^1.1.3",

? ? "function-bind": "^1.1.0",

? ? "html-webpack-plugin": "^2.28.0",

? ? "http-proxy-middleware": "^0.17.3",

? ? "less": "^2.7.2",

? ? "less-loader": "^3.0.0",

? ? "lodash": "^4.17.4",

? ? "opn": "^4.0.2",

? ? "optimize-css-assets-webpack-plugin": "^1.3.0",

? ? "ora": "^1.1.0",

? ? "pug": "^2.0.0-beta.12",

? ? "pug-filters": "^2.1.2",

? ? "pug-loader": "^2.3.0",

? ? "rimraf": "^2.6.0",

? ? "semver": "^5.3.0",

? ? "style-loader": "^0.14.1",

? ? "url-loader": "^0.5.7",

? ? "vue": "^2.3.3",

? ? "vue-event-calendar": "^1.3.0",

? ? "vue-form": "^4.1.1",

? ? "vue-loader": "^11.1.4",

? ? "vue-router": "^2.5.3",

? ? "vue-style-loader": "^2.0.0",

? ? "vue-template-compiler": "^2.2.4",

? ? "vuex": "^2.2.1",

? ? "webpack": "^2.3.3",

? ? "webpack-dev-middleware": "^1.10.0",

? ? "webpack-hot-middleware": "^2.18.0",

? ? "webpack-merge": "^4.1.0"

? },

? "engines": {

? ? "node": ">= 4.0.0",

? ? "npm": ">= 3.0.0"

? },

? "browserslist": [

? ? "> 1%",

? ? "last 2 versions",

? ? "not ie <= 8"

? ]

}

[size=13]

[/size]

• slide-ul 是幻灯片的盒子 包括了所有的img position: relative;
• img position: absolute; 全部隐藏，默认显示第一张图片
• pageIndex 分页索引对应 img 的索引
• 在点击分页索引时 给对应的 img 显示，其它的 img 隐藏
• 设置一个定时器函数每三秒执行一次，每次都传入 pageIndex 实现定时切换 默认是 0 判断 (pageIndex++ >= img.length) 0 : pageIndex++
• 鼠标移入图片清除定时器 鼠标移出时重启定时器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery-slide-fadeIn</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body {

            font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;

            font-size: 14px;

        }

        .clearfix:after{

            content: "";

            display: block;

            clear: both;

        }

        input,button,select,textarea{

            outline:none;border: none;

        }

        a{

            text-decoration: none;

            color: #fff;

        }

        ul,li{

            list-style: none;

        }

        img{

            border: none;

        }

        .wrap{

            width: 790px;

            margin: 20px auto;

        }

        .slide-box{

            height: 340px;

            overflow: hidden;

            position: relative;

        }

        .slide-left{

            width: 100%;

            position: relative;

        }

        .slide-left li{

            position: absolute;

            display: none;

        }

        .slide-left li a{

            display: block;

        }

        .slide-left li a img{

            width: 100%;

        }

      

        .slider-indicator{

            position: absolute;

            z-index: 1;

            left: 50%;

            transform: translateX(-50%);

            bottom: 20px;

            font-size: 0;

            padding: 4px 8px;

            border-radius: 12px;

            background-color: rgba(255, 255, 255, 0.3);

        }

        .slider-indicator i{

            display: inline-block;

            margin-right: 10px;

            width: 12px;

            height: 12px;

            border-radius: 100%;

            background-color: #fff;

            cursor: pointer;

        }

        .slider-indicator i.page-active{

            background-color: #2196F3;

        }

        .slide-btn{

            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            z-index: 1;

            display: block;

            width: 40px;

            height: 50px;

            line-height: 45px;

            background-color: rgba(0,0,0,.2);

            font-size: 20px;

            text-align: center;

            display: none;

        }

        .slider-prev{

            left: 0;

            border-top-right-radius: 6px;

            border-bottom-right-radius: 6px;

        }

        .slider-next{

            right: 0;

            border-top-left-radius: 6px;

            border-bottom-left-radius: 6px;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="slide-box clearfix">

            <ul class="slide-left"></ul>

            <div class="slider-indicator"></div>

            <a href="javascript:void(0)" class="slide-btn slider-prev"><</a>

            <a href="javascript:void(0)" class="slide-btn slider-next">></a>

        </div>

    </div>

    <script src="https://cdn.bootcss.com/jquery ... gt%3B

    <script>

    $(function(){

        var data = [{

            url: '#1',

            img: '//img11.360buyimg.com/da/jfs/t4657/90/3561484677/83893/f05ac312/59004d0dNc66933b4.png'

        },

        {

            url: '#2',

            img: '//img1.360buyimg.com/da/jfs/t5122/78/482212244/90225/c4ccd3b7/59001933Nb4a11a00.jpg'

        },

        {

            url: '#3',

            img: '//img12.360buyimg.com/da/jfs/t3172/29/7532815266/78514/96c6e177/58ba3348N479cafe1.jpg'

        },

        {

            url: '#4',

            img: '//img20.360buyimg.com/da/jfs/t4249/102/1331521120/224199/40dcb547/58c0b221N5acfd3c6.jpg'

        },

        {

            url: '#5',

            img: '//img13.360buyimg.com/da/jfs/t5518/250/560655744/102051/9f4965b2/5901d835N6c3481c7.jpg'

        }];



        var slide = $('.slide-box');

        var prev = $('.slider-prev');

        var next = $('.slider-next');

        var slideLeftData = $('.slide-left');

        var slideIndicator = $('.slider-indicator');

        var index = 0,slideAuto=null,isAnimate=false;



        var slideData = '';        // 数据

        var pageIndicator = '';    // page的小点

        $.each(data, function(index, val) {

            slideData += "<li data-id="+index+"><a href="+val.url+">![](+val.img+)</a></li>";

            pageIndicator += "<i></i>";

        });

        slideLeftData.append(slideData);     // 给左边盒子添加图片信息



        slideIndicator.append(pageIndicator).find('i').eq(0).addClass('page-active'); // 给第一个小点添加样式

        $('.slide-left li').eq(0).show();



        prev.on('click', prevPage);     // 点击上一页

        next.on('click', nextPage);    // 点击下一页

        // 自动运行函数

        var autoRun = function(){

            slideAuto = setInterval(function(){

                nextPage(index);

            }, 3000)

        }

        autoRun();

        // 上一页

        function prevPage(){

            if(isAnimate){ return;}

            isAnimate = true;

            index--;

            if(index < 0){

                index = data.length -1;

            }

            slideLeftData.find('li').eq(index).fadeIn().siblings().fadeOut();

            slidePage(index);

            isAnimate = false;

        }

        

        // 下一页

        function nextPage(){

            if(isAnimate){ return;}

            isAnimate = true;

            index++;

            if(index >= data.length){

                index = 0;

            }

            slideLeftData.find('li').eq(index).fadeIn().siblings().fadeOut();

            slidePage(index);

            isAnimate = false;

        }

        // page

        slideIndicator.on('mouseenter', 'i', function(){

            var pageIndex = $(this).index();

            index = pageIndex;

            $(this).addClass('page-active').siblings().removeClass('page-active');

            slideLeftData.find('li').eq(pageIndex).fadeIn().siblings().fadeOut();

        });

        // 获取当前page 并添加样式

        function slidePage(){

            slideIndicator.find('i').eq(index).addClass('page-active').siblings().removeClass('page-active')

        }

        // 鼠标移入时

        slide.on('mouseenter', function(){

            $('.slide-btn').show();        // 显示左右的按钮

            clearInterval(slideAuto);     // 清除定时器

        });

        // 鼠标移出时

        slide.on('mouseleave', function(){

            $('.slide-btn').hide();        // 隐藏左右的按钮

            autoRun();                    // 继续运行定时器

        });    

    });

    </script>

</body>

</html>

• slide-box 是包括幻灯片的盒子，设置overflow: hidden;
• slide-ul 是幻灯片的盒子（宽度为img的宽度*img的length） 包括了所有的img(浮动在一行)
• 分别给 幻灯片的盒子 最前面克隆 img 的最后一个，最后面克隆 img 的第一个 4,0,1,2,3,4,0
• 此时克隆了两个，重新给图片盒子宽度添加总长度， 给第0个写一个 left -img (一个宽度)就显示真正的第一个图片
• 每点击下一页时 (pageIndex++ > imgLength -1) 0 : pageIndex++; 根据对应的pageIndex操作 left
• 每点击上一页时 (pageIndex-- < 0) imgLength-1 : pageIndex--; 在对应的pageIndex操作 left
• 点击到最后一个和最前面一个图片时，在动画效果结果后操作css让元素left值变成对应克隆的对象left，造成一个无限切换的错觉

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery-slide-无缝滚动</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body {

            font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;

            font-size: 14px;

        }

        .clearfix:after{

            content: "";

            display: block;

            clear: both;

        }

        input,button,select,textarea{

            outline:none;border: none;

        }

        a{

            text-decoration: none;

            color: #fff;

        }

        ul,li{

            list-style: none;

        }

        img{

            border: none;

        }

        .wrap{

            width: 790px;

            margin: 20px auto;

        }

        .slide-box{

            height: 340px;

            overflow: hidden;

            position: relative;

        }

        .slide-ul{

            width: 100%;

            position: relative;

        }

        .slide-ul li{

            width: 790px;

            float: left;

        }

        .slide-ul li a{

            display: block;

        }

        .slide-ul li a img{

            width: 100%;

        }

      

        .slider-indicator{

            position: absolute;

            z-index: 1;

            left: 50%;

            transform: translateX(-50%);

            bottom: 20px;

            font-size: 0;

            padding: 4px 8px;

            border-radius: 12px;

            background-color: rgba(255, 255, 255, 0.3);

        }

        .slider-indicator i{

            display: inline-block;

            margin-right: 10px;

            width: 12px;

            height: 12px;

            border-radius: 100%;

            background-color: #fff;

            cursor: pointer;

        }

        .slider-indicator i.page-active{

            background-color: #2196F3;

        }

        .slide-btn{

            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            z-index: 1;

            display: block;

            width: 40px;

            height: 50px;

            line-height: 45px;

            background-color: rgba(0,0,0,.2);

            font-size: 20px;

            text-align: center;

            display: none;

        }

        .slider-prev{

            left: 0;

            border-top-right-radius: 6px;

            border-bottom-right-radius: 6px;

        }

        .slider-next{

            right: 0;

            border-top-left-radius: 6px;

            border-bottom-left-radius: 6px;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="slide-box clearfix">

            <ul class="slide-ul"></ul>

            <div class="slider-indicator"></div>

            <a href="javascript:void(0)" class="slide-btn slider-prev"><</a>

            <a href="javascript:void(0)" class="slide-btn slider-next">></a>

        </div>

    </div>

    <script src="https://cdn.bootcss.com/jquery ... gt%3B

    <script>

    $(function(){

        var data = [{

            url: '#1',

            img: '//img11.360buyimg.com/da/jfs/t4657/90/3561484677/83893/f05ac312/59004d0dNc66933b4.png'

        },

        {

            url: '#2',

            img: '//img1.360buyimg.com/da/jfs/t5122/78/482212244/90225/c4ccd3b7/59001933Nb4a11a00.jpg'

        },

        {

            url: '#3',

            img: '//img12.360buyimg.com/da/jfs/t3172/29/7532815266/78514/96c6e177/58ba3348N479cafe1.jpg'

        },

        {

            url: '#4',

            img: '//img20.360buyimg.com/da/jfs/t4249/102/1331521120/224199/40dcb547/58c0b221N5acfd3c6.jpg'

        },

        {

            url: '#5',

            img: '//img13.360buyimg.com/da/jfs/t5518/250/560655744/102051/9f4965b2/5901d835N6c3481c7.jpg'

        }];



        var slide = $('.slide-box'),    // 幻灯片盒子

            prev = $('.slider-prev'),    // 上一页按钮

            next = $('.slider-next'),    // 下一页按钮

            slideUl = $('.slide-ul'),    // 图片盒子

            slideIndicator = $('.slider-indicator'),    // 中部page盒子

            pageIndex = 0,        // page索引

            slideAuto=null,        // 自动滚动方法

            isAnimate=false,    // 事件锁

            slideData = '',        // img数据变量

            pageIndicator = '';    // page的小点变量



        // 循环添加img数据和page小点的个数

        $.each(data, function(index, val) {

            slideData += "<li data-id="+index+"><a href="+val.url+">![](+val.img+)</a></li>";

            pageIndicator += "<i></i>";

        });

        // 给盒子添加图片信息

        slideUl.append(slideData);     

        // 给page盒子添加小点并给第一个添加 page-active 样式

        slideIndicator.append(pageIndicator).find('i').eq(0).addClass('page-active'); 

        // 默认给第一个li添加显示

        $('.slide-ul li').eq(0).show();

        // 获取图片盒子里面的 li 个数

        var imgLength = slideUl.children().length;

        // 分别给 图片盒子 最前面克隆 li 最后一个，最后面克隆 li 第一个 [4,0,1,2,3,4,0]

        var lastLi = slideUl.find('li').last();    

        var firstLi = slideUl.find('li').first();

        slideUl.prepend(lastLi.clone())

        slideUl.append(firstLi.clone());



        // 获取克隆后图片盒子里面的 li 个数 

        var countLength = slideUl.children().length;

        // 单独一个li的盒子宽度

        var slideLiWidth = slideUl.find('li').width();

        // 重新计算出 图片盒子 的宽度 让 li 浮动在一行 

        var boxWidth = countLength * slideLiWidth;

        // 给图片盒子宽度添加总长度 然后第一个看到的是克隆的那个，所以给个 - 一个li宽度 就显示真正的第一个 

        slideUl.css({'left': -slide.width(), width: boxWidth});



        // 点击上一页

        prev.on('click', function(){

            prevPage(1)

        });     

        // 点击下一页

        next.on('click', function(){

            nextPage(1);

        });

        

        // 自动运行函数

        var autoRun = function(){

            slideAuto = setInterval(function(){

                nextPage(1);

            }, 3000)

        }

        autoRun();

        // 上一页

        function prevPage(len){

            if(isAnimate){ return;}

            isAnimate = true;

            pageIndex -=len;

            // '-='+slideLiWidth 0 -790px -1580px -2370px -3160px -3950px

            slideUl.animate({left: '+='+len*slideLiWidth },function(){

                if( pageIndex < 0){

                    pageIndex = imgLength-1; // 获取最后一个

                    slideUl.css({left: -slideLiWidth*imgLength}); // 默认回到 -3950px 也就是第后一个

                }

                isAnimate = false;

                slidePage(pageIndex); // 获取当前的 小点 状态 

            });



        }

        // 下一页

        function nextPage(len){

            if(isAnimate){ return;}

            isAnimate = true;

            pageIndex += len;

            console.log( pageIndex )

            // '-='+slideLiWidth -790px -1580px -2370px -3160px -3950px

            slideUl.animate({left: '-='+len*slideLiWidth },function(){

                // 判断当前索引是否等于img图片的长度（没克隆前的长度）

                if(pageIndex > imgLength -1 ){

                    pageIndex = 0;    // 给索引值设置为0 也就是当前一个

                    slideUl.css({left: -slideLiWidth}); // 默认回到 -790px 也就是第0个

                }

                isAnimate = false;

                slidePage(pageIndex); // 获取当前的 小点 状态 

            });

        }

        // 点击切换

        slideIndicator.on('click', 'i', function(){

            var index = $(this).index();

            $(this).addClass('page-active').siblings().removeClass('page-active');

            if(pageIndex > index){          // 当前page 大于 当前索引

                prevPage(pageIndex - index); // 向后移动

            }else{

                nextPage(index - pageIndex); // 向前移动

            }

        });

        // 获取当前page 并添加样式

        function slidePage(){

            slideIndicator.find('i').removeClass('page-active').eq(pageIndex).addClass('page-active')

        }

        // 鼠标移入时

        slide.on('mouseenter', function(){

            $('.slide-btn').show();        // 显示左右的按钮

            clearInterval(slideAuto);     // 清除定时器

        });

        // 鼠标移出时

        slide.on('mouseleave', function(){

            $('.slide-btn').hide();        // 隐藏左右的按钮

            autoRun();                    // 继续运行定时器

        });    

    });

    </script>

</body>

</html>

• 功能结合了淡入淡出和无缝滚动

\d 匹配 [0-9] 数字字符

\w 匹配 [a-zA-Z_0-9] 单词字符，字母、数字下划线

\s 匹配 [\t\n\x0B\f\r] 空白符

[a-zA-Z0-9] 匹配范围类 小写字母a-z 大写字母 A-Z 和数字 0-9

\b 匹配单词边界

var str ='hello world';

/llo\b/.test(str); // true 匹配边界是llo

/wor\b/.test(str); // false 匹配边界是wor

. 匹配 [^\r\n] 除了回车符和换行符之外的所有字符

* 匹配 出现零次或多次（任意次）

+ 匹配 出现一次或多次（至少出现一次）

? 匹配 出现零次或一次（最多出现一次）

x{3} 匹配 x出现3次

^ 匹配 以xxx开头

$ 匹配 以xxx结束

var str = '  hello bsfans ';

function trim(str){

    return str.replace(/^\s+|\s+$/g,'');

}

trim(str);

var str = 'bsfans@admin.com';

function isEmail(str){

    return  /^\w+@\w+\.(com|cn|com\.cn)$/.test( str );

}

isEmail(str);

function isPhoneNum(str){

    return /^1[3|5|6|7|8]\d{9}$/.test( str )

}

isPhoneNum('13600007663');

function isValidUsername(str){

    return /^\w{6,20}$/.test( str )

}

isValidUsername('a_3EDdfd');

function isValidPassword(str){

    if(str.length < 6 || str.length > 20){

        return false;

    }

    var num = 0;

    if(/[A-Z]/.test(str)){

        num++;

    }

    if(/[a-z]/.test(str)){

        num++;

    }

    if(/[0-9]/.test(str)){

        num++;

    }

    if(/_/.test(str)){

        num++;

    }

    return num >= 2; 

}

isValidPassword('qweqeqew'); // false

isValidPassword('qweqe111'); // true