手风琴效果

今天写了一个类似手风琴的效果,基于jQuer，贴出来分享，生命在于折腾，加油。

function imgShowleft(){
            var timers=setInterval(function(){
                var t=$(".active");
                if(t.index()===2){
                    t.removeClass("active");
                    $("#imgShowleft > li").eq(0).addClass("active");
                }else{
                    t.removeClass("active");
                    t.next().addClass("active");
                }
            },3000);
            $("#imgShowleft > li").on("mouseover",function(){
                if(timers!=null){
                    clearInterval(timers);
                    timers=null;
                }
                if(!$(this).hasClass("active")){
                    console.log("1");
                    $(this).addClass("active").siblings().removeClass("active")
                }
            });
        }
        $("#imgShowleft > li").on("mouseout",function(){
            imgShowleft()
        })
        imgShowleft();

html：

        

            

                    标准一
                    

            
            

                    标准二
                    

            
            

                    标准三
                    

            
        
    

css :       

.box-warp{width: 1152px; margin:0 auto;}
.numImg{margin-bottom: 40px;}
.main-box {height:325px; overflow: hidden; border:1px dotted #ddd; width: 1152px; padding:0;}
.main-box li{width: 80px; float:left; overflow: hidden; transition:width linear 500ms;}
.main-box li.active{width: 992px;}
.main-box li.active .item-title{background:rgba(255, 152, 0, 0.10)}
.main-box li.active .show-box{width: 912px;}
.main-box li .item-title{float: left; vertical-align: top; height: 275px; width: 29px; border-right: 1px solid #fff; background-color: #f8f8f8; color: #666; padding: 25px; font-size: 18px; text-align: center;}
.main-box li .show-box{display:inline-block; float:left; width: 0; transition:width linear 500ms;}

js:

        function imgShowleft(){
            var timers=setInterval(function(){
                var t=$(".active");
                if(t.index()===2){
                    t.removeClass("active");
                    $("#imgShowleft > li").eq(0).addClass("active");
                }else{
                    t.removeClass("active");
                    t.next().addClass("active");
                }
            },3000);
            $("#imgShowleft > li").on("mouseover",function(){
                if(timers!=null){
                    clearInterval(timers);
                    timers=null;
                }
                if(!$(this).hasClass("active")){
                    console.log("1");
                    $(this).addClass("active").siblings().removeClass("active")
                }
            });
        }
        $("#imgShowleft > li").on("mouseout",function(){
            imgShowleft()
        })
        imgShowleft();

还记得以前的面试，让我写setInterval计时器，我只记得setTimeout，不记得setInterval，然后，我就凭着想象力，写了一个setTimeIn，，纪念我这个菜鸟的青春。

效果如下