二十四、异形滚动轮播图（样式轮替轮播图）

24.1 DOM

<div class="carousel" id="carousel">
    <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>
    </ul>
    <div class="btns">
        <a href="#" id="leftBtn"></a>
        <a href="#" id="rightBtn"></a>
    </div>
</div>

24.2 css

<style>
    /* 清楚默认样式 */
    * {
        margin: 0;
        padding: 0;
    }
    ul, ol {
        list-style: none;
    }
    .carousel {
        position: relative;
        width: 670px;
        height: 221px;
        margin: 50px auto;
        background: url(images/shuzi/bg.png);
        /* overflow: hidden; */
    }
    .carousel ul li {
        position: absolute;
        width: 70px;
        height: 50px;
        left: -120px;
        top: 70px;
    }
    .carousel ul li.no1 {
        width: 90px;
        height: 60px;
        left: 20px;
        top: 60px;
    }
    .carousel ul li.no2 {
        width: 112px;
        height: 80px;
        left: 121px;
        top: 30px;
    }
    .carousel ul li.no3 {
        width: 156px;
        height: 100px;
        left: 250px;
        top: 16px;
    }
    .carousel ul li.no4 {
        width: 112px;
        height: 84px;
        left: 430px;
        top: 30px;
    }
    .carousel ul li.no5 {
        width: 90px;
        height: 60px;
        left: 560px;
        top: 60px;
    }
    .carousel ul li.no6 {
        width: 70px;
        height: 50px;
        left: 710px;
        top: 70px;
    }
    .carousel .btns a {
        position: absolute;
        width: 44px;
        height: 44px;
        top: 150px;
    }
    .carousel .btns a:first-child {
        left: 25px;
    }
    .carousel .btns a:last-child {
        right: 25px;
    }
    img {
        width: 100%;
        height: 100%;
    }
</style>

24.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"),
        });
    }
    // console.log(JSONARR); 数组中保存7个对象
    // 定义数组 用于保存所有li的类名
    var classNameArr = ["no0","no1","no2","no3","no4","no5","no6"];
    // 右按钮点击事件
    $("#rightBtn").click(function(){
        // 防流氓
        if ($("li").is(":animated")){
            return;
        }
        // 让.noX运动到.noX-1的位置
        $(".no1").animate(JSONARR[0],600);
        $(".no2").animate(JSONARR[1],600);
        $(".no3").animate(JSONARR[2],600);
        $(".no4").animate(JSONARR[3],600);
        $(".no5").animate(JSONARR[4],600);
        $(".no6").animate(JSONARR[5],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]);
        }
    });
    // 左按钮点击事件
    $("#leftBtn").click(function(){
        // 防流氓
        if ($("li").is(":animated")){
            return;
        }
        // 让.noX运动到.noX+1的位置
        $(".no0").animate(JSONARR[1],600);
        $(".no1").animate(JSONARR[2],600);
        $(".no2").animate(JSONARR[3],600);
        $(".no3").animate(JSONARR[4],600);
        $(".no4").animate(JSONARR[5],600);
        $(".no5").animate(JSONARR[6],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);
        // 体现在元素身上
        for (var i = 0 ; i < 7 ; i++){
            $("li").eq(i).attr("class",classNameArr[i]);
        }
    });
</script>