180405 demo

选项卡

<div class="wrapper">
    <div class="search">
        <input type="text"> Male:
        <input type="radio" class="btn mBtn" name="sex"></button>
        Female:<input type="radio" class="btn fBtn" name="sex"></button>
        All:<input type="radio" checked='checked' class='btn aBtn' name="sex"></input>
    </div>
    <div class="friendList">
        <ul>
            <!-- <li>
                <img src="./src/img/1.png">
                <p class="name">王港</p>
                <p class="des">颈椎不好</p>
            </li>
            <li>
                <img src="./src/img/2.png">
                <p class="name">刘金雷</p>
                <p class="des">你没有见过陌生的脸</p>
            </li> -->
        </ul>
var personArr = [{name: '王港', src: './src/img/1.png',des: '颈椎不好',sex: 'm'}, 
                 {name: '刘莹',src: './src/img/5.png',des: '我是谁',sex: 'f'}, 
                 {name: '王秀莹',src: './src/img/4.png',des: '我很好看',sex: 'f'},
                 {name: '刘飞翔',src: './src/img/2.png',des: '瓜皮刘',sex: 'm'},
                 {name: '刘金雷',src: './src/img/3.png',des: '你没有见过陌生的脸',sex: 'm'}];

//------------------从后台获取数据存到数组里-----------------

var oUl = document.getElementsByTagName('ul')[0];

//-------------------   获得ul对象    --------------------------

var store = {
    text: '', // 输入文本状态
    sex: 'btn aBtn' // 按钮点选状态
}

//-----------------------  全局状态标记  ------------------------

function renderList(arr) {
    var htmlStr = '';
    arr.forEach(function(ele, index) {
        htmlStr += 
'<li><img src="' + ele.src + '"/><p class="name">' 
+ ele.name + '</p><p class="des">' + ele.des + '</p></li>';
    });
    oUl.innerHTML = htmlStr;
}
renderList(personArr);

//------------------------  数组塞进标签  ---------------------------------

var oInp = document.getElementsByTagName('input')[0]; //  获取文本框dom对象

oInp.oninput = function() { // 注册键入事件
    store.text = this.value; //键入input标签的值，通过dom对象的value属性赋值给 全局状态标记text
    //console.log(store.text);
    renderList(lastFilter(personArr)); // 调用最终筛选函数，得到返回值筛选的数组，变成标签
}

//--------------------获得输入框键入状态，并连接好键入信息与状态标记的映射----------------------

function filterByText(filterText, arr) { // 参数：键入文本，信息数组
    if (!filterText) { //没有输入文本，返回现有数组
        return arr;
    } else {
        return arr.filter(function(ele, index) { 
// 信息数组中所有元素( 每一个元素是一个对象 )，遍历全部以对象为单位的元素
            return ele.name.indexOf(filterText) != -1; 
// 筛选所有元素的属性name值与传入参数即键入文本匹配文本相一致的对象
//兄弟你单纯调用这个indexof是只返回一个，可是你是返回所有indexof ！= -1 
        });}}

//---------------- 文本筛选函数，参数：匹配文本和数组  返回：匹配文本后的对象  ---------------------

// var oRadioArr1 = document.getElementsByClassName('btn');
// console.log(oRadioArr1);

var oRadioArr = Array.prototype.slice.call(document.getElementsByClassName('btn'), 0);
//获取按钮dom对象转换成数组  
console.log(oRadioArr);

oRadioArr.forEach(function(ele, index) {
    ele.onclick = function() {
        store.sex = this.className;
        renderList(lastFilter(personArr));
    }
});

//---------  遍历每一个按钮注册点击事件：将当前被点击按钮的类名赋值给全局状态标记  ---------
//                    完成按钮标签与状态标记的映射

function filterBySex(sexStr, arr) {
    if (sexStr == 'btn aBtn') {
        return arr;
    } else {
        return arr.filter(function(ele, index) {
            if (sexStr.indexOf(ele.sex) != -1) {
                return true;
                // 返回结果是true的数组
                }})}};

//--------------- 按钮/性别筛选函数: 参数：按钮对应状态(性别)，信息数组 返回：筛选后数组---------------------

function combineFilterFunc(obj) { 
//整合函数，既然将函数传入当做参数，那么整合函数里要考虑作为参数的函数参数
//实参列表：{对象{text:实参列{store[text],personArr}，sex:实参列表{store[sex],personArr}} , personArr}
    var filterFuncObj = obj;
    console.log(filterFuncObj);
    return function(arr) {
        var lastArr = arr; // 
        console.log(lastArr);


        for (var prop in filterFuncObj) { //调用两个函数
            lastArr = filterFuncObj[prop](store[prop], lastArr); 
            // filterFuncObj.filterByText(全局状态标记：键入文本/性别状态,当前数组)
            // filterFuncObj[text](store[text],personArr)
            // filterFuncObj[sex](store[sex],filterByText-personArr)

        }
        return lastArr; // 经过文本性别共同筛选后的数组
 };}

//-----------------  完整筛选函数：参数：文本筛选函数+性别筛选函数  返回值：最终数组----------------------

var lastFilter = combineFilterFunc({
    text: filterByText, 
// 精髓：将函数作为属性赋值给变量 text  全局状态标记对应的属性名也是 text   
//当执行text函数时可以映射相应用到的全局标记
    sex: filterBySex
});

//--------------- 封装好筛选函数 -------------------

---

选项卡

<style>
    * {
        padding: 0px;
        margin: 0px;
        text-decoration: none;
    }

    .wrapper {
        padding: 10px 15px;
        border: 2px solid #ccc;
        width: 500px;
        border-radius: 6px;
        margin: 100px auto 0px auto;
    }

    .wrapper .part {
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
    }

    .wrapper .part span {
        color: #bbbbbb;
        margin-right: 10px;
    }

    .wrapper .part a {
        padding: 4px 6px;
        margin-right: 2px;
    }

    .wrapper .part .active {
        color: #fff;
        background-color: #f40;
    }

    .wrapper .content .box {
        height: 200px;
        display: none;
        text-align: center;
        font-size: 25px;
        font-weight: 700;
        color: orange;
    }

    .wrapper .content .active {
        display: block;
    }
</style>

<!-- 经常出现不同的状态，可以选择先把样式写好 -->
</head>

<body>
<div class="wrapper">
    <div class="part">
        <span>地区：</span>
        <a href="#" class="active">大陆</a>
        <a href="#">日韩</a>
        <a href="#">香港</a>
        <a href="#">欧美</a>
    </div>
    <div class="content">
        <div class="box active">
            胡歌
        </div>
        <div class="box">
            小栗旬
        </div>
        <div class="box">
            邓紫棋
        </div>
        <div class="box">
            杰森斯坦森
        </div>
    </div>
</div>
<script>
    var oBtnArray = document.getElementsByTagName('a'); //类数组，数组方法受限
    var oDivArray = document.getElementsByClassName('box');
    var lastActiveBtn = oBtnArray[0];
    var lastActiveDiv = oDivArray[0];

    for (var i = 0; i < oBtnArray.length; i++) {
        (function(_Index) {
            oBtnArray[_Index].onclick = function() {
                changeBtnStatus(_Index);
                changeDivStatus(_Index);
            }
        })(i) // 有自己的AO
    }

    // for (var i = 0; i < oBtnArray.length; i++) {
    //     oBtnArray[i].onclick = function() {
    //         console.log(i); //    i一直是4 ， 函数AO没有 ， GO的i在函数执行前变成4
    //         changeBtnStatus(i);
    //     }
    // }
    // // i = 4  闭包 立即执行函数

    function changeBtnStatus(index) {
        lastActiveBtn.className = '';
        oBtnArray[index].className = 'active';
        lastActiveBtn = oBtnArray[index];
    }

    function changeDivStatus(index) {
        lastActiveDiv.className = 'box';
        oDivArray[index].className = 'box active';
        lastActiveDiv = oDivArray[index];
    }
</script>

轮播图

//-------------html---------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="wrapper">
        <ul>
            <li><img src="./img/cat_furry_gray_120328_3840x2400.jpg" alt=""></li>
            <li><img src="./img/dog_muzzle_eyes_lie_95312_3840x2400.jpg" alt=""></li>
            <li><img src="./img/flamingos_birds_colorful_feathers_120420_3840x2400.jpg" alt="./img/flamingos_birds_colorful_feathers_120420_3840x2400.jpg"></li>
            <li><img src="./img/pug_dog_muzzle_look_scarf_120435_3840x2400.jpg" alt="./img/pug_dog_muzzle_look_scarf_120435_3840x2400.jpg"></li>
            <li><img src="./img/cat_furry_gray_120328_3840x2400.jpg" alt="./img/cat_furry_gray_120328_3840x2400.jpg"></li>
        </ul>
        <div class="btn leftBtn">&lt</div>
        <div class="btn rightBtn">&gt</div>
        <div class="sliderIndex">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script src="move.js"></script>
    <script src="./index.js"></script>
</body>
</html>

//---------------js--------------
//-----------引入运动框架----------

var oUl = document.getElementsByTagName("ul")[0],
    oLeftBtn = document.getElementsByClassName("leftBtn")[0],
    oRightBtn = document.getElementsByClassName("rightBtn")[0],
    oSpanArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span'),
    timer = null,
    moveDis = oUl.children[0].offsetWidth,
    num = oUl.children.length - 1,
    index = 0,
    locked = true; 


for(var i = 0; i < oSpanArray.length; i++){
    (function(_index){
        oSpanArray[_index].onclick = function (){
            locked = false;
            clearTimeout(timer);
            index = _index;
            startMove(oUl, {left: - (_index * moveDis) },function (){
                changeIndex(index);
                locked = true;
                timer = setInterval(function(){
                    autoMove('->');
                },1500);
            });
        } 
    })(i);
}

oLeftBtn.onclick = function(){
    autoMove('<-');
}

oRightBtn.onclick = function(){
    autoMove('->');
}

function autoMove(direction){
    if(locked){
        locked = false;
        clearTimeout(timer);
        if(direction === '->'){
            index++;
            startMove(oUl, {left: oUl.offsetLeft - moveDis}, function(){
                if(oUl.offsetLeft === -moveDis * num){
                    oUl.style.left = '0px';
                    index = 0;
                }
                locked = true;
                changeIndex(index);
                timer = setTimeout(function(){
                    autoMove('->');
                },1500);
            });
        }else{
            if(oUl.offsetLeft === 0){
                oUl.style.left = -moveDis * num + 'px';
                index = 4;
            }
            index--;
            startMove(oUl,{left:oUl.offsetLeft + moveDis}, function(){
                locked = true;
                changeIndex(index);
                timer = setTimeout(function(){
                    autoMove('->');
                },1500);
            })
        }
    }
}

function changeIndex(index){
    for(var i = 0; i < oSpanArray.length; i++){
        oSpanArray[i].className = '';
    }
    oSpanArray[index].className = 'active';
}

timer = setInterval(function(){
    autoMove('->');
},1500);

// ---------------css----------------

*{
    padding:0px;
    margin:0px;
}

.wrapper{
    position: relative;
    width: 960px;
    height: 600px;
    margin: 100px auto 0px;
    /* border: 1px solid black; */
    overflow: hidden;
}

.wrapper ul{
    position: absolute;
    width: 4800px;
    left: 0px;
    list-style: none;
}

.wrapper ul::after{
    content:'';
    clear: both;
    display: block;
}

.wrapper ul li{
    width:960px;
    height:600px;
    float: left;
}

.wrapper ul li img{
    width:100%;
    height: 100%;
}

.wrapper .btn{
    position: absolute;
    top: 50%;
    margin-top: -55px;
    width: 80px;
    height: 120px;
    background-color: #000;
    color: beige;
    font-size: 80px;
    line-height: 120px;
    text-align: center;
    opacity: 0.2;
    cursor: pointer;
}

.wrapper .btn:hover{
    opacity: 0.5;
}

.wrapper .leftBtn{
    left: 10px;
}
.wrapper .rightBtn{
    right:10px;
}

.wrapper .sliderIndex{
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.wrapper .sliderIndex{
    position: absolute;
    bottom: 17px;
    width: 100%;
    text-align: center;
}

.wrapper .sliderIndex span{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ccc;
    margin-right: 30px;
}

.wrapper .sliderIndex span.active{
    background-color: rgb(72, 137, 223);
}


// --------------运动框架-----------------

function startMove(obj, targetObj, cb) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var bStop = true;
        for (var attr in targetObj) {
            if (attr != 'opacity') {
                iCur = parseInt(getStyle(obj, attr));
            } else {
                iCur = parseFloat(getStyle(obj, attr)) * 100;
            }
            iSpeed = (targetObj[attr] - iCur) / 8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            if (attr == 'opacity') {
                obj.style.opacity = (iCur + iSpeed) / 100;
            } else {
                obj.style[attr] = iCur + iSpeed + 'px';
            }
            if (targetObj[attr] !== iCur) {
                bStop = false;
            }
        }
            if (bStop) {
                clearInterval(obj.timer);
                (typeof cb) === 'function' && cb.apply(obj);
            }
    }, 30);
}

function getStyle(obj, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(obj, null)[attr];
    } else {
        return obj.currentStyle[attr];
    }
}