旅游行业案例展示：HTML+jQuery实现动态手风琴效果,-优快云博客

本文链接：https://blog.youkuaiyun.com/koudandan/article/details/135088854

HTML：

<!--引入jquery文件-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!--手风琴 s-->
<div class="shoufengqing">
            <ul class="flex-center">
                <li id="sli1" data-nums="1">
                    <div class="imgTop" style="background: url(images/case1.png) no-repeat;background-size: cover;">
                        <div class="zz"></div>
                    </div>
                    <div class="desccont flex-center">
                        <div class="cont cont1">
                            <div class="img"><img src="images/c3-icon-4.png"></div>
                            <div class="sub_title">旅游</div>
                        </div>
                        <div class="cont cont2">
                            <div class="title">旅游行业解决方案</div>
                            <div class="desc">全面提升旅游产业升级转型 ---创新管理服务模式,提升营销服务能力,增强游客体验感知! </div>
                            <div class="know_more">了解详情 > </div>
                        </div>
                    </div>
                </li>
                <li id="sli2" data-nums="2">
                    <div class="imgTop" style="background: url(images/case2.png) no-repeat;background-size: cover;">
                        <div class="zz"></div>
                    </div>
                    <div class="desccont flex-center">
                        <div class="cont cont1">
                            <div class="img"><img src="images/c3-icon-2.png"></div>
                            <div class="sub_title">法律</div>
                        </div>
                        <div class="cont cont2">
                            <div class="title">法律</div>
                            <div class="desc">全面提升旅游产业升级转型 ---创新管理服务模式,提升营销服务能力,增强游客体验感知! </div>
                            <div class="know_more">了解详情 > </div>
                        </div>
                    </div>
                </li>
                <li id="sli3" data-nums="3">
                    <div class="imgTop" style="background: url(images/case3.png) no-repeat;background-size: cover;">
                        <div class="zz"></div>
                    </div>
                    <div class="desccont flex-center">
                        <div class="cont cont1">
                            <div class="img"><img src="images/c3-icon-3.png"></div>
                            <div class="sub_title">医疗</div>
                        </div>
                        <div class="cont cont2">
                            <div class="title">医疗</div>
                            <div class="desc">全面提升旅游产业升级转型 ---创新管理服务模式,提升营销服务能力,增强游客体验感知! </div>
                            <div class="know_more">了解详情 > </div>
                        </div>
                    </div>
                </li>
                <li id="sli4" data-nums="4">
                    <div class="imgTop" style="background: url(images/case4.png) no-repeat;background-size: cover;">
                        <div class="zz"></div>
                    </div>
                    <div class="desccont flex-center">
                        <div class="cont cont1">
                            <div class="img"><img src="images/c3-icon-4.png"></div>
                            <div class="sub_title">教育</div>
                        </div>
                        <div class="cont cont2">
                            <div class="title">教育</div>
                            <div class="desc">全面提升旅游产业升级转型 ---创新管理服务模式,提升营销服务能力,增强游客体验感知! </div>
                            <div class="know_more">了解详情 > </div>
                        </div>
                    </div>
                </li>
                <li id="sli5" data-nums="5">
                    <div class="imgTop" style="background: url(images/case5.png) no-repeat;background-size: cover;">
                        <div class="zz"></div>
                    </div>
                    <div class="desccont flex-center">
                        <div class="cont cont1">
                            <div class="img"><img src="images/c3-icon-5.png"></div>
                            <div class="sub_title">机械制造</div>
                        </div>
                        <div class="cont cont2">
                            <div class="title">旅游行业解决方案</div>
                            <div class="desc">全面提升旅游产业升级转型 ---创新管理服务模式,提升营销服务能力,增强游客体验感知! </div>
                            <div class="know_more">了解详情 > </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
<!--手风琴 e-->

CSS：

/*手风琴 start*/
.shoufengqing{width:100%;height:400px;margin:0px auto;margin-bottom:20px;position:relative;}
.shoufengqing ul{width: 100%;height: 100%;}
.shoufengqing ul li{width:15%;height:100%;position:relative;overflow:hidden;transition:width 0.5s;}
.shoufengqing ul li .imgTop{width:100%;height: 100%;}
.shoufengqing ul li .imgTop img{width:100%;height: 100%;}
.shoufengqing ul li .imgTop .zz{width: 100%;height: 100%;}
.shoufengqing ul li .desccont{justify-content:space-around;flex-flow:column;position: absolute;top: 0;width: 80%;height: 100%;margin: 0 auto;padding:0 11%;background-color: rgba(0,0,0,0.4);}
.shoufengqing ul li .desccont .cont{display: flex;justify-content: center;align-items: center;flex-flow: column;}
.shoufengqing ul li .desccont .cont .img{}
.shoufengqing ul li .desccont .cont .img img{}
.shoufengqing ul li .desccont .cont .sub_title{font-size: 24px;font-weight: 400;color: #FFFFFF;line-height: 24px;margin-top: 20px;}
.shoufengqing ul li .desccont .cont .title{font-size: 24px;font-weight: bold;color: #FFFFFF;line-height: 48px;}
.shoufengqing ul li .desccont .cont .desc{font-size: 14px;font-weight: 400;color: #FFFFFF;line-height: 24px;}
.shoufengqing ul li .desccont .cont .know_more{width: 127px;height: 39px;display:block;background: #CC1619;font-size: 14px;font-weight: 400;color: #FFFFFF;line-height: 39px;text-align: center;margin-top: 50px;}
.shoufengqing ul li .desccont .cont.cont2{align-items: flex-start;display: none;}
/*展开状态*/
.shoufengqing ul li:hover{cursor: pointer;}
.shoufengqing ul li.active{width: 40%;}
.shoufengqing ul li.active .imgTop{}
.shoufengqing ul li.active .imgTop .zz{width: 100%;height: 100%;background-color: rgba(0,0,0,0);}
.shoufengqing ul li.active .desccont{background-color: rgba(255,0,0,0);}
.shoufengqing ul li.active .desccont .cont.cont1{display: none;}
.shoufengqing ul li.active .desccont .cont.cont2{display: block;}
/*手风琴 end*/

JS：

<script>
    //默认显示第一个
    $(".shoufengqing ul li:first-child").addClass('active');
    $(function(){
        var _index7=0;
        $(".shoufengqing ul li").mouseover(function(){
            _index7=$(this).index();
            $(this).stop().stop().addClass('active').siblings("li").stop().removeClass('active');
        });
        $(".shoufengqing ul li").mouseout(function(){
            $(this).eq(_index7).stop().removeClass('active');
        });
        $(".shoufengqing ul li").mouseout(function(){
            $(this).eq(_index7).stop().addClass('active');
        });
    });
    //定时轮播显示
    $(document).ready(function(){
        var showNumber=6;
        var timer=null;   //定时器返回值，主要用于关闭定时器
        var iNow=0;      //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
        timer=setInterval(function(){        //打开定时器
            iNow++;                          //让图片的索引值次序加1，这样就可以实现顺序轮播图片
            if(iNow>showNumber){    //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
                iNow=0;
            }
            $("#sli"+iNow).addClass("active").siblings().removeClass("active");
        },3000);   //2000为轮播的时间
    });

</script>

手风琴写法