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

最新推荐文章于 2022-08-16 14:18:15 发布

原创

最新推荐文章于 2022-08-16 14:18:15 发布 · 1.8k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#手风琴轮播

本文介绍了如何使用jQuery创建手风琴效果的图片轮播，通过float:left布局和改变图片宽度来实现。提供了核心代码并鼓励读者留言交流。

之前在写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){
                $(this).animate({
                    width:100
                },300,function(){
                });
             }
            // if ($(this).prop('data-show'))