jQuery手风琴图片轮播（源码+注释）

痛定思痛。 2022-03-16 06:24 289阅读 0赞

> 之前在写js轮播图的时候，没有说手风琴式的轮播图，今天借着jQuery代码少的优势，介绍jQuery下的手风琴轮播图

首先看看实现效果：（图片来自百度）

![20190226202308546.gif][]

基本原理：利用float：left来布局，通过改变图片的宽来实现手风琴效果

代码及简单注释如下（因为过多的注释会影响记忆和独立思考，所以今后将注释关键点）

jquery代码（3.3.1版）：

$(function () {
        // 鼠标离开事件（所有的li的宽变为默认值，恢复原样）
        $('.menu').bind('mouseleave', function () {
            $(this).children('li').each(function () {
                // 两种方法判断如何让恢复原样，第一种需要在变长的同时添加一个属性用来判断当前变长的那个li
                // 第二种简单粗暴，直接找到不为初值li，变为初值即可（注意css值为带px，需转化）
                // console.log($(this).css("width"));
                 if(parseInt($(this).css("width"))>100){
                    $(this).animate({
                        width:100
                    },300,function(){
                    });
                 }
                // if ($(this).prop('data-show')) {
                //     $(this).animate({
                //         width: 100
                //     }, 300);
                // }
            })
            // 鼠标进入事件，图片展开，注意消除快速切换的bug，利用stop(),先停再执行
        }).children("li").each(function () {
            $(this).bind("mouseenter", function () {
                $(this).prop("data-show", true);
                $(this).stop().animate({
                    width: 500
                }, 300).siblings().stop().animate({
                    width: 100
                }, 300, function () {
                    $(this).removeAttr('data-show');
                })
            })
        })
    });

基本代码：

<!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>手风琴动画</title>
        <script src="./js/jquery-3.3.1.min.js"></script>
        <script src="./jscount/index.js"></script>
        <style>
            body{
                padding: 0;
                margin: 0;
            }
            .menu li{
                list-style: none;
                float: left;
                width: 100px;
                height: 300px;
                overflow: hidden;
            }
            .menu li>span{
                position: absolute;
                width: 100px;
                height: 300px;
                line-height: 300px;
                color: rgb(43, 37, 37);
                background-color: rgba(0, 0, 0, 0.103)
            }
            .menu li>img{
                width: 500px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <ul class="menu">
            <li><span>风景</span><img src="./image/1.jpg" alt=""></li>
            <li><span>风景</span><img src="./image/2.jpg" alt=""></li>
            <li><span>风景</span><img src="./image/3.jpg" alt=""></li>
            <li><span>风景</span><img src="./image/4.jpg" alt=""></li>
            <li><span>风景</span><img src="./image/5.jpg" alt=""></li>
            <li><span>风景</span><img src="./image/6.jpg" alt=""></li>
        </ul>
    </body>
    </html>

欢迎留言交流，必回！！！

[20190226202308546.gif]: /images/20220316/1afa643be3b847ef949124c7ebbbea83.png