二十、手风琴效果

• 分析：

  • 我们将最外层容器宽定为500px，里面有5张图片，每一张平均分配的位置是100px。

  • 当鼠标移入后，当前图片展开，占220px，其他图片要压缩，每张平均分配70px。

20.1 DOM

<div class="carousel" id="carousel">
    <ul class="unit" id="unit">
        <li class="no0" id="no0"><img src="images/lunbo/1.jpg" alt=""></li>
        <li class="no1" id="no1"><img src="images/lunbo/2.jpg" alt=""></li>
        <li class="no2" id="no2"><img src="images/lunbo/3.jpg" alt=""></li>
        <li class="no3" id="no3"><img src="images/lunbo/4.jpg" alt=""></li>
        <li class="no4" id="no4"><img src="images/lunbo/5.jpg" alt=""></li>
	</ul>
</div>

20.2 css

/* 清楚默认样式 */
* {
    margin: 0;
    padding: 0;
}
ul, ol {
    list-style: none;
}
a {
    text-decoration: none;
}
.carousel {
    width: 500px;
    height: 150px;
    margin: 50px auto;
    border: 3px solid #000;
    position: relative;
    overflow: hidden;
}
.carousel ul li {
    position: absolute;
    width: 220px;
    height: 150px;
    top: 0;
    left: 0;
}
.carousel ul li.no1 {
    left: 100px;
}
.carousel ul li.no2 {
    left: 200px;
}
.carousel ul li.no3 {
    left: 300px;
}
.carousel ul li.no4 {
    left: 400px;
}

20.3 jquery

<!-- 引入jquery包 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 获取元素 命名时加上$提醒我们是一个jquery对象
    var $no0 = $("#no0");
    var $no1 = $("#no1");
    var $no2 = $("#no2");
    var $no3 = $("#no3");
    var $no4 = $("#no4");
    var $carousel = $("#carousel");

    // 添加鼠标移入事件
    $no0.mouseenter(function(){
        // 防流氓
        $("li").stop(true);
        $no1.animate({"left": 220},500);
        $no2.animate({"left": 220 + 70},500);
        $no3.animate({"left": 220 + 70 * 2},500);
        $no4.animate({"left": 220 + 70 * 3},500);
    });
    $no1.mouseenter(function(){
        // 防流氓
        $("li").stop(true);
        $no1.animate({"left": 70},500);
        $no2.animate({"left": 220 + 70},500);
        $no3.animate({"left": 220 + 70 * 2},500);
        $no4.animate({"left": 220 + 70 * 3},500);
    });
    $no2.mouseenter(function(){
        // 防流氓
        $("li").stop(true);
        $no1.animate({"left": 70},500);
        $no2.animate({"left": 70 * 2},500);
        $no3.animate({"left": 220 + 70 * 2},500);
        $no4.animate({"left": 220 + 70 * 3},500);
    });
    $no3.mouseenter(function(){
        // 防流氓
        $("li").stop(true);
        $no1.animate({"left": 70},500);
        $no2.animate({"left": 70 * 2},500);
        $no3.animate({"left": 70 * 3},500);
        $no4.animate({"left": 220 + 70 * 3},500);
    });
    $no4.mouseenter(function(){
        // 防流氓
        $("li").stop(true);
        $no1.animate({"left": 70},500);
        $no2.animate({"left": 70 * 2},500);
        $no3.animate({"left": 70 * 3},500);
        $no4.animate({"left": 70 * 4},500);
    });
    // 给carousel添加鼠标离开事件
    $carousel.mouseleave(function(){
        // 防流氓
        $("li").stop(true);
        $no1.animate({"left": 100},500);
        $no2.animate({"left": 100 * 2},500);
        $no3.animate({"left": 100 * 3},500);
        $no4.animate({"left": 100 * 4},500);
    })
</script>