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

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

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

基本原理：利用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){