二十五、异形滚动参与多元素的运动

25.1 DOM

添加多个元素

<ul>
    <li class="no0"><img src="images/shuzi/0.jpg" alt=""></li>
    <li class="no1"><img src="images/shuzi/1.jpg" alt=""></li>
    <li class="no2"><img src="images/shuzi/2.jpg" alt=""></li>
    <li class="no3"><img src="images/shuzi/3.jpg" alt=""></li>
    <li class="no4"><img src="images/shuzi/4.jpg" alt=""></li>
    <li class="no5"><img src="images/shuzi/5.jpg" alt=""></li>
    <li class="no6"><img src="images/shuzi/6.jpg" alt=""></li>
    <li class="waiting"><img src="images/shuzi/7.jpg" alt=""></li>
    <li class="waiting"><img src="images/shuzi/8.jpg" alt=""></li>
    <li class="waiting"><img src="images/shuzi/9.jpg" alt=""></li>
</ul>

25.2 css

添加的多的元素，设置为隐藏

.carousel ul li.waiting {
    display: none;
}

25.3 jquery

<!-- 引入jquery包 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 定义数组 将所有li的状态保存起来
    // 一般常量用大写字母表示
    // var JSONARR = [];
    // 使用for循环 将所有li的状态保存 每一个li都是单独的个体，都有自己的 width height left top
    // for (var i = 0 ; i < 7 ; i++){
    //     JSONARR.push({
    //         "width": $(".no" + i).css("width"),
    //         "height": $(".no" + i).css("height"),
    //         "left": $(".no" + i).css("left"),
    //         "top": $(".no" + i).css("top")
    //     });
    // }
    // 将JSONARR[]h和for循环合并优化
    var JSONARR = (function(){
        var temp = [];
        for (var i = 0 ; i < 7 ; i++){
            temp.push({
                "width": $(".no" + i).css("width"),
                "height": $(".no" + i).css("height"),
                "left": $(".no" + i).css("left"),
                "top": $(".no" + i).css("top")
            });
        }
        return temp;
    })();
    // console.log(JSONARR); 数组中保存7个对象
    // 定义数组 用于保存所有li的类名
    // var classNameArr = ["no0","no1","no2","no3","no4","no5","no6"];
    // var classNameArr = [];
    // 循环所有的li元素并保存类名
    // $("li").each(function(i){
    //     classNameArr.push($(this).attr("class"));
    // });
    // 将散的语句合并
    var classNameArr = (function(){
        var temp = [];
        $("li").each(function(i){
            temp.push($(this).attr("class"));
        });
        return temp;
    })();
    // console.log(classNameArr);
    // 右按钮点击事件
    $("#rightBtn").click(function(){
        // 防流氓
        if ($("li").is(":animated")){
            return;
        }
        // 让.noX运动到.noX-1的位置
        for (var i = 1 ; i < 7 ; i++){
            $(".no" + i).animate(JSONARR[i - 1],600);
        }
        // 不能让.no0穿堂而过，应该是瞬移
        // $(".no0").css(JSONARR[6]);
        // 当点击一次之后不能继续点击，分析原因：类名和样式不统一
        // 为了让类名和样式相统一 轮换类名
        // 点击的时候
        // no0 no1 no2 no3 no4 no5 no6 原始位置
        // no6 no0 no1 no2 no3 no4 no5 点击一次
        // no5 no6 no0 no1 no2 no3 no4 点击二次
        // 将数组的最后一位删除，放到数组的第一位
        classNameArr.unshift(classNameArr.pop());
        // console.log(classNameArr);
        // 体现在元素身上
        // for (var i = 0 ; i < 7 ; i++){
        //     $("li").eq(i).attr("class",classNameArr[i]);
        // }
        $("li").each(function(i){
            $(this).attr("class",classNameArr[i]);
        });
        // 由于.no6 是由.waiting{display:none;}变来的，此时.no6只有display:none;的样式和最初始样式
        // 为了防止出现bug，我们强制给.no6添加行内样式
        $(".no6").css(JSONARR[6]);
    });
    // 左按钮点击事件
    $("#leftBtn").click(function(){
        // 防流氓
        if ($("li").is(":animated")){
            return;
        }
        // 让.noX运动到.noX+1的位置
        for (var i = 0 ; i < 6 ; i++){
            $(".no" + i).animate(JSONARR[i + 1],600);
        }
        // 不能让.no6穿堂而过，应该是瞬移
        // $(".no6").css(JSONARR[0]);
        // 当点击一次之后不能继续点击，分析原因：类名和样式不统一
        // 为了让类名和样式相统一 轮换类名
        // 点击的时候
        // no0 no1 no2 no3 no4 no5 no6 原始位置
        // no1 no2 no3 no4 no5 no6 no0 点击一次
        // no2 no3 no4 no5 no6 no0 no1 点击二次
        // 将数组的第一位删除，放到数组的最后一位
        classNameArr.push(classNameArr.shift());
        // console.log(classNameArr);
        // 体现在元素身上
        $("li").each(function(i){
            $(this).attr("class",classNameArr[i]);
        });
        // 由于.no0 是由.waiting{display:none;}变来的，此时.no0只有display:none;的样式和最初始样式
        // 为了防止出现bug，我们强制给.no0添加行内样式
        $(".no0").css(JSONARR[0]);
    });
</script>

25.4 jquery 代码优化后

<!-- 引入jquery包 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 定义数组 将所有li的状态保存起来
    // 一般常量用大写字母表示
    // 将JSONARR[]h和for循环合并优化
    var JSONARR = (function(){
        var temp = [];
        for (var i = 0 ; i < 7 ; i++){
            temp.push({
                "width": $(".no" + i).css("width"),
                "height": $(".no" + i).css("height"),
                "left": $(".no" + i).css("left"),
                "top": $(".no" + i).css("top")
            });
        }
        return temp;
    })();
    // 定义数组 用于保存所有li的类名
    // 将散的语句合并
    var classNameArr = (function(){
        var temp = [];
        $("li").each(function(i){
            temp.push($(this).attr("class"));
        });
        return temp;
    })();
    // 右按钮点击事件
    $("#rightBtn").click(function(){
        // 防流氓
        if ($("li").is(":animated")){
            return;
        }
        // 让.noX运动到.noX-1的位置
        for (var i = 1 ; i < 7 ; i++){
            $(".no" + i).animate(JSONARR[i - 1],600);
        }
        classNameArr.unshift(classNameArr.pop());
        $("li").each(function(i){
            $(this).attr("class",classNameArr[i]);
        });
        // 由于.no6 是由.waiting{display:none;}变来的，此时.no6只有display:none;的样式和最初始样式
        // 为了防止出现bug，我们强制给.no6添加行内样式
        $(".no6").css(JSONARR[6]);
    });
    // 左按钮点击事件
    $("#leftBtn").click(function(){
        if ($("li").is(":animated")){
            return;
        }
        // 让.noX运动到.noX+1的位置
        for (var i = 0 ; i < 6 ; i++){
            $(".no" + i).animate(JSONARR[i + 1],600);
        }
        classNameArr.push(classNameArr.shift());
        $("li").each(function(i){
            $(this).attr("class",classNameArr[i]);
        });
        $(".no0").css(JSONARR[0]);
    });
</script>