超简单的 jquery 版 手风琴滑块效果

超简单的 jquery 版 手风琴滑块效果

h5手风琴效果的写法有很多，我所写的效果 主要是使用jquery的animate方法实现的，鼠标移入手风琴左右滑动展示当前的模块，具体效果如下：
查看地址 link>>

• 页面结构如下：将所要展示的图片生成列表

<!--手风琴图片展示-->
<div class="accordionBox">
    <ul>
        <li class="first on">
            <a href=""><img src="image/headbg.jpg" alt=""/></a>
        </li>
        <li >
            <a href=""><img src="image/headbg02.jpg" alt=""/></a>
        </li>
        <li >
            <a href=""><img src="image/headbg03.jpg" alt=""/></a>
        </li>
        <li >
            <a href=""><img src="image/headbg04.jpg" alt=""/></a>
        </li>
        <li >
            <a href=""><img src="image/headbg05.jpg" alt=""/></a>
        </li>
    </ul>
</div>

• css 样式如下

.accordionBox {
            /*--手风琴动画效果--*/
            width: 100%;
            height: 449px;
            margin: 40px auto 38px auto;
            margin-bottom: 40px;
            position: relative;
            overflow: hidden;
        }
        .accordionBox ul {
            height: 449px;
            overflow: hidden;
        }
        .accordionBox ul li {
            width: 140px;
            height: 449px;
            position: relative;
            overflow: hidden;
            float: left;
            margin-right: 2px;
        }
        .accordionBox ul li img {
            width:100%;
            height: 100%;
            object-fit: cover;
            border: 1px solid #1388ef;
        }
        .accordionBox ul li.first {
            width: 627px;
        }

• js写法，通过鼠标的mouseover事件，实现手风琴效果

    $(function(){
        //执行动画
        var index = 0;
        $(".accordionBox").on("mouseover", "ul > li", function (e) {
            index = $(this).index();
            $(".accordionBox ul li").removeClass("on");
            $(this).stop().stop().addClass("on").animate({ width: 627 }, 500).siblings("li").stop().animate({ width: 140 }, 500);
            $(".imgCen").eq(index).css("display", "block").siblings(".imgCen").css("display", "none");
        });
    })

需要完整代码的请参考git地址 —— [ 手风琴github ]