今天完成的事情：

完成前台修改;

我感兴趣模态框；

找职位页内样式问题；

响应式调整；

伙伴之言轮播；

明天计划的事情：

之前neta想法的尝试

遇到的问题：

伙伴之言的轮播逐条轮播，尝试几种方法，效果都不满意，折腾了一天，最后还是在jq插件库里找了一个能实现相同功能的；此插件在bootstrap轮播基础上修改样式和js控制,基本代码：

html：

在bootstrap模板上做了修改，因为逐条轮播，每次显示四个条目一次轮播，故每个item设置元素为4

<div id="partner" class="carousel slide" data-ride="carousel" data-shift="1" >
    <div class="carousel-inner">
        <ul class="row item active">
            <li class="col-xs-3 " ng-repeat="item in jsonData|limitTo:4"><li>
            
        </ul>
        <ul class="row item">
            <li class="col-xs-3 " ng-repeat="item in jsonData|limitTo:-2">
               
            </li>
        </ul>
    </div>
    <a class="carousel-control left" href="#partner" data-slide="prev"></a>
    <a class="carousel-control right" href="#partner" data-slide="next"></a>
</div>

js部分：定义

var carousels = $('#partner').carousel();//模板中设置data-ride="carousel"属性未生效时激活自动轮播
carousels.each(function() {
    var $obj = $(this);
    var $inner = $obj.find('.carousel-inner');

    var id = 'uuid' + new Date().getTime();//为轮播添加id，便于动态生成轮播样式，不影响其他轮播
    $obj.addClass(id);

js部分：动态样式+控制

if ($obj.data('shift') === 1) {//模板属性设置data-shift="1"时激活单条滚动状态
    var items = $obj.find('.item > [class*="col-"]'),//轮播条目总数
        visibleCnt = $obj.find('.item:first [class*="col-"]').length,//显示条目的数量，为第一个item内条目数量
        wrapper = "";

    // build styles
    var rule_base = '.carousel.' + id + ' .carousel-inner > .item',//根据生成的id确保此轮播项目基本样式不受其他样式影响
        styles = $('<style></style>'),
        rules = [];
  //变化过程：
  //变化前：基本样式{row item active}
  //变化时：{row item active left} 下一条目{row item next left}
  //变化结束：下一条目变为当前{row item active}
    rules[0] = rule_base + '.next {left: ' + (100 / visibleCnt) + '%; transform: none;}';//下一条目在变化前先右移25%
    rules[1] = rule_base + '.active {left: 0;}';//当前条目
    rules[2] = rule_base + '.active.left {left: -' + (100 / visibleCnt) + '%; transform: none;}';//当前条目变化时左移动25%；
    rules[3] = rule_base + '.next.left {left: 0;}';//下一条目变化时left由25%---0
    rules[4] = rule_base + '.active.right {left: ' + (100 / visibleCnt) + '%; transform: none;}';//下一页
    rules[5] = rule_base + '.prev.right {left: 0;}';
    rules[6] = rule_base + '.prev {left: -' + (100 / visibleCnt) + '%; transform: none;}';
    for (var i = 0; i < rules.length; i++) {
        styles.append(rules[i]);
    }
    $obj.prepend(styles);//生成样式

    // rebuild items
    for (var i = 0; i < $(items).length; i++) {//有多少个项目生成多少个ul，1234，2345，3456，6789..等形式为一个item
        var $item = $(items[i]);
        var parent = $item.parent();//ul
        if (parent.hasClass('item')) {
            if (!wrapper.length) {
                wrapper = parent.clone().removeClass('active').html('');//父元素克隆/移除actve状态并清空为一个样式为{row item}的空ul元素；
            }
            $item.unwrap();//删除该父元素；
        }

        var itemGroup = [$item];
        for (var x = 1; x < visibleCnt; x++) {
            var a = i + x;
            var next = $(items[a]);//items为所有条目的集合
            if (!next.length) {//当next为空执行
                next = $(items[(a - $(items).length)]);
            }
            itemGroup[x] = next.clone(); //将当前item克隆传入数组itemGroup 【1234】【2345】【3456】【4567】.。。。
        }
        var newSet = wrapper.clone().html(itemGroup);//将每个分好的itemGroup放入空ul中
        if (i == 0) {
            newSet.addClass('active');//设置第一个变化的条目
        }
        newSet.appendTo($inner);//添加
    }
}

总体来说，目的为做出1，2，3，4，5，6依次往前移动的效果；

实现方式：通过生成6个集合item分别为【1234】【2345】【3456】【4561】【5612】【6123】，

每次变化时，当前对象产生一个向左or右移动的动画，同时下个条目设置display：none同时向左or右25%，动画结束后，已经设置display：none的项目添加active，此时display：block，执行动画，利用视觉差达到效果；

收获：

。。。。。.