手风琴效果插件

  <div class="sfmenu">
        <ul>
            <li class="bg">
                <a href="#">
                    <img src="1.jpg" alt="图1"/>
                    <div class="Miaoshu Miaoshu_moren">
                        <p></p>
                        <span></span>
                    </div>
                </a>
            </li>
            <li class="sx">
                <a href="#">
                    <img src="2.jpg" alt="图1"/>
                    <div class="Miaoshu">
                        <p></p>
                        <span></span>
                    </div>
                </a>
            </li>
            <li class="sx">
                <a href="#">
                    <img src="3.jpg" alt="图1"/>
                    <div class="Miaoshu">
                        <p></p>
                        <span></span>
                    </div>
                </a></li>
            <li class="sx dsde" >
                <a href="#">
                    <img src="4.jpg"  alt="图1"/>
                    <div class="Miaoshu">
                        <p></p>
                        <span></span>
                    </div>
                </a></li>
            <li class="sx" id="zuihou">
                <a href="#">
                    <img src="5.jpg" alt="图1"/>
                    <div class="Miaoshu">
                        <p></p>
                        <span></span>
                    </div>
                </a></li>
        </ul>
    </div>

 

　　这是css部分的样式注意宝宝的布局方式

       *{margin: 0;padding: 0}
        .sfmenu{
            width: 600px;
            height: 380px;
            border: 1px solid #cccccc;
            margin: 100px auto;
        }
        .sfmenu>ul{
            list-style: none;
            width: auto;
            position: relative;
        }
       ul>li{
            float: left;
            background:url("3.jpg");
            height: 380px;
            position: relative;
        }
        img{
            width:100%;
            height: 380px;
            position: absolute;
            border:0px;
        }
        .sx{
            width: 25px;
            height: 380px;
        }
        .bg{
            width: 500px;
        }
        #zuihou{
            position:absolute;
            right: 0px;
        }
        .Miaoshu{
            width: 100%;
            height: 40px;
            position: absolute;
            bottom: 0;
            background:rgba(0, 0, 0, 0.8);
            color: #ffffff;
            display: none;
            line-height: 20px;
        }
        .Miaoshu>p{font-size: 0.8em;}
        .Miaoshu_moren{display: block}
        .dsde{position: absolute;right: 20px;}

js来了重点来了运用了jquery封装插件完成这个效果

 $.fn.extend({
        sfq:function(a,miaoshu){
            //计时器
            var timer=setInterval(sfqd,5000);
            var i=0;
            var timer2;
            var $ul_li=$("ul>li");
            function sfqd(){
                //定义一个用于文字操作的闭包函数
                function wz(ind){
                    var $miaoshu_id=$(miaoshu.id);
                    $miaoshu_id.find("p").text("").css({transition:"all 1s"});
                    $miaoshu_id.find("span").text("").css({transition:"all 1s"});
                    $miaoshu_id.css({display:"none"});
                    $miaoshu_id.eq(ind).css({display:"block"});
                    $miaoshu_id.eq(ind).find("p").text(miaoshu.hbj[ind]);
                    $miaoshu_id.eq(ind).find("span").text(miaoshu.spanbj[ind]);
                }
                wz(i);
                $ul_li.removeAttr("class").addClass(a.yuan);
                $ul_li.eq(i).addClass(a.xian).css({ transition:"all 0.3s" });
                i++;
                if(i==5){
                    i=0;
                }
                return wz;
               }
          //定义一个显示文字的闭包
          var xg=sfqd();
            xg(0);//默认显示的第一个的文字
            $(this).on({
                "mouseenter":function(){
                    clearInterval(timer);//清除定时器
                    clearInterval(timer2);
                    $(this).addClass(a.xian).removeClass(a.yuan).css({
                       transition:"all 0.3s"
                    });
                    $(this).siblings().removeAttr("class").addClass(a.yuan);
                    xg($(this).index());
                    },
                "mouseleave": function () {
                    //重新开启计时器
                     var j=$(this).index();
                    timer2=setInterval(function(){
                        if(j>3){
                            j=-1;
                        }
                        xg(j+1);
                        $ul_li.removeAttr("class").addClass(a.yuan);
                        $ul_li.eq(j+1).addClass(a.xian).css({ transition:"all 0.3s" });
                        j++;
                    },5000);
                    $(this).find("ul").css("display","none");
                }
            });
        }
    });

在页面中调用封装的插件（这只是我的默认的实例你可以根据想要的更改内容）页面中图片的展开与收缩有点变形，如果你想，你可以做成背景图片怎么好看怎么来

 var ys={yuan:"sx",xian:"bg"};//现在大图样式和和小图样式的class传入到插件里面
    //定义描述文字对象
    var miaoshu={
        id:".Miaoshu",//描述文字的盒子
        hbj:["浪漫雪景","美丽初夏","人间天堂","秋风拂面","春意昂然"],//h标记
        spanbj:["美丽的冬天","美丽的夏天","美丽的冬天","美丽的夏天","美丽的秋天"]//span的描述信息
    };
    //传入参数调用插件
    $("ul>li").sfq(ys,miaoshu);