js嵌套轮播图

$(function(){
    var navLi = $(".top_nav").find("li"),
        conDiv = $(".top_con").find(".t_con"),
        resulte = [],
        currentId = "";

    //Url地址
    var url = window.location.href;                //获取url地址
    getUrl = url.split("/");                    //根据"/"分离url
    lastUrl = getUrl[getUrl.length-1];            //获取最后一个rul部分
    endUrl = lastUrl.split("#")[lastUrl.split("#").length-1];    //再分离

    //伪地址
    navLi.each(function(){
        currentId = $(this).find("a").attr("href").split("#")[$(this).find("a").attr("href").split("#").length-1];
        resulte.push(currentId);
    })

    //主导航的点击
    navLi.off().on("click",function(){
        var index = $(this).index(".top_nav li");
        navLiClick(index);
        outerSlider(index);
    });

    function navLiClick(index){
        navLi.eq(index).addClass("active").siblings().removeClass("active");
        conDiv.eq(index).show().siblings().hide();
    }

    //外层滚动
    function outerSlider(num){
        var smallBox = $(".top_con").find(".t_con").eq(num),
            smallBoxUl = smallBox.find(".small_nav_box ul"),
            smallBoxLi = smallBox.find(".small_nav_box li"),
            smallBoxMoveCon = smallBox.find(".small_con_box .small_con"),
            smallBoxCon = smallBoxMoveCon.find(".small_item"),
            smallBoxConWidth = smallBoxCon.outerWidth(true),
            smallBoxLiWidth = smallBoxLi.outerWidth(true);
            smallBoxLiLength = smallBoxLi.length-1,
            smallBoxPrev = smallBox.find(".small_prev"),
            smallBoxNext = smallBox.find(".small_next"),
            smallBoxTish = 0;

        // 重置
        firstShow(0);
        smallBoxUl.css({left:0})
        smallBoxMoveCon.css({left:0},300)
        smallBoxLi.eq(0).addClass("active").siblings().removeClass("active");

        //上一张
        smallBoxPrev.off().click(function(){
            if(smallBoxTish > 0){
                smallBoxTish--;
            }else{
                smallBoxTish = smallBoxLiLength;
            }
            firstShow(smallBoxTish);
        })
        //下一张
        smallBoxNext.off().click(function(){
            if(smallBoxTish < smallBoxLiLength){
                smallBoxTish++;
            }else{
                smallBoxTish = 0;
            }
            firstShow(smallBoxTish);
        })
        //小图标点击
        smallBoxLi.off().click(function(){
            var k = smallBoxLi.index(this);
            firstShow(k);
            smallBoxTish  = k;
        })

        function firstShow(j){
            if(j == 0 || j == 1){
                smallBoxUl.stop().animate({left:0},300)
            }else if(j == smallBoxLiLength-1 || j == smallBoxLiLength){
                smallBoxUl.stop().animate({left:-smallBoxLiWidth*(smallBoxLiLength-4)},300)
            }else{
                smallBoxUl.stop().animate({left:-smallBoxLiWidth*(j-2)},300)
            }
            smallBoxLi.eq(j).addClass("active").siblings().removeClass("active");
            smallBoxMoveCon.stop().animate({left:-smallBoxConWidth*j},300)
            smallBoxCon.eq(j).addClass("active").siblings().removeClass("active");
            innerSlider(j);
        }

        //内层滚动
        function innerSlider(m){
            var programBox = smallBoxCon.eq(m),
                programBoxItemMove = programBox.find(".item_program ul"),
                programBoxItem = programBox.find(".item_program li"),
                programBoxItemnNum = programBox.find(".item_num li"),
                programBoxItemWidth = programBoxItem.outerWidth(true),
                programBoxPrev = programBox.find(".program_prev"),
                programBoxNext = programBox.find(".program_next"),
                programBoxThis = 0,
                programTimer = null,
                programBoxItemLength = programBoxItem.length-1;

            //重置
            programBoxItemMove.css({left:0})
            programBoxItemnNum.eq(0).addClass("active").siblings().removeClass("active");

            setTimeout(function(){
                autoTime();
            },10)
            programBox.hover(function(){
                if(programTimer){
                    clearInterval(programTimer);
                }
            },function(){
                autoTime();
            })

            function autoTime(){
                programTimer = setInterval(programlRight,3000)
            }

            programBoxPrev.on("click",programlLeft);
            programBoxNext.on("click",programlRight);

            function programlLeft(){
                if(programBoxThis > 0){
                    programBoxThis--;
                }else{
                    programBoxThis = programBoxItemLength;
                }
                secondShow(programBoxThis);
            }

            function programlRight(){
                if(programBoxThis < programBoxItemLength){
                    programBoxThis++;
                }else{
                    programBoxThis = 0;
                }
                secondShow(programBoxThis);
            }

            programBoxItemnNum.click(function(){
                var p = programBoxItemnNum.index($(this));
                secondShow(p);
                programBoxThis = p;
            })

            function secondShow(l){
                programBoxItemMove.stop().animate({left:-programBoxItemWidth*l},300);
                programBoxItemnNum.eq(l).addClass("active").siblings().removeClass("active");
            }
        }
    }

    //循环Url
    for(var e = 0; e < navLi.length; e++){
        if(resulte[e] == endUrl){
            navLiClick(e);
            outerSlider(e);
            return false;
        }else if(endUrl == "food2.shtml" || endUrl == "menu"){
            outerSlider(0);
            return false;
        }
    }
})

<div class="content">
        <div class="top_nav">
            <ul>
                <li class="active"><a href="#web1">1</a></li>
                <li><a href="#web2">2</a></li>
            </ul>
        </div>
        <div class="top_con">
            <div class="t_con1 t_con" style="display:block;">
                <div class="small_nav_box">
                    <div class="small_nav">
                        <ul>
                            <li class="active">1<i></i></li>
                            <li>2<i></i></li>
                            <li>3<i></i></li>
                            <li>4<i></i></li>
                            <li>5<i></i></li>
                            <li>6<i></i></li>
                            <li>7<i></i></li>
                        </ul>
                    </div>
                    <a href="javascript:;" class="small_prev"><</a>
                    <a href="javascript:;" class="small_next">></a>
                </div>
                <div class="small_con_box">
                    <div class="small_con">
                        <div class="small_item active">
                            <div class="item_program">
                                <ul>
                                    <li><img src="images/line/family/equip4_1.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_2.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_3.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_4.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_5.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_6.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_7.jpg" alt=""></li>
                                </ul>
                            </div>
                            <div class="item_num">
                                <ul>
                                    <li class="active"></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                            <a href="javascript:;" class="program_prev"></a>
                            <a href="javascript:;" class="program_next"></a>
                        </div>
                        <div class="small_item">
                            <div class="item_program">
                                <ul>
                                    <li><img src="images/line/family/equip4_2.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_3.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_4.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_5.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_6.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_7.jpg" alt=""></li>
                                </ul>
                            </div>
                            <div class="item_num">
                                <ul>
                                    <li class="active"></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                            <a href="javascript:;" class="program_prev"></a>
                            <a href="javascript:;" class="program_next"></a>
                        </div>
                        <div class="small_item">
                            <div class="item_program">
                                <ul>
                                    <li><img src="images/line/family/equip4_3.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_4.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_5.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_6.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_7.jpg" alt=""></li>
                                </ul>
                            </div>
                            <div class="item_num">
                                <ul>
                                    <li class="active"></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                            <a href="javascript:;" class="program_prev"></a>
                            <a href="javascript:;" class="program_next"></a>
                        </div>
                        <div class="small_item">
                            <div class="item_program">
                                <ul>
                                    <li><img src="images/line/family/equip4_4.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_5.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_6.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_7.jpg" alt=""></li>
                                </ul>
                            </div>
                            <div class="item_num">
                                <ul>
                                    <li class="active"></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                            <a href="javascript:;" class="program_prev"></a>
                            <a href="javascript:;" class="program_next"></a>
                        </div>
                        <div class="small_item">
                            <div class="item_program">
                                <ul>
                                    <li><img src="images/line/family/equip4_5.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_6.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_7.jpg" alt=""></li>
                                </ul>
                            </div>
                            <div class="item_num">
                                <ul>
                                    <li class="active"></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                            <a href="javascript:;" class="program_prev"></a>
                            <a href="javascript:;" class="program_next"></a>
                        </div>
                        <div class="small_item">
                            <div class="item_program">
                                <ul>
                                    <li><img src="images/line/family/equip4_6.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_7.jpg" alt=""></li>
                                </ul>
                            </div>
                            <div class="item_num">
                                <ul>
                                    <li class="active"></li>
                                    <li></li>
                                </ul>
                            </div>
                            <a href="javascript:;" class="program_prev"></a>
                            <a href="javascript:;" class="program_next"></a>
                        </div>
                        <div class="small_item">
                            <div class="item_program">
                                <ul>
                                    <li><img src="images/line/family/equip4_7.jpg" alt=""></li>
                                </ul>
                            </div>
                            <div class="item_num">
                                <ul>
                                    <li class="active"></li>
                                </ul>
                            </div>
                            <a href="javascript:;" class="program_prev"></a>
                            <a href="javascript:;" class="program_next"></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="t_con2 t_con">
                <div class="small_nav_box">
                    <div class="small_nav">
                        <ul>
                            <li class="active">1<i></i></li>
                            <li>2<i></i></li>
                            <li>3<i></i></li>
                            <li>4<i></i></li>
                            <li>5<i></i></li>
                            <li>6<i></i></li>
                            <li>7<i></i></li>
                        </ul>
                    </div>
                    <a href="javascript:;" class="small_prev"><</a>
                    <a href="javascript:;" class="small_next">></a>
                </div>
                <div class="small_con_box">
                    <div class="small_con">
                        <div class="small_item active">
                            <div class="item_program">
                                <ul>
                                    <li><img src="images/line/family/equip4_1.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_2.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_3.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_4.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_5.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_6.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_7.jpg" alt=""></li>
                                </ul>
                            </div>
                            <div class="item_num">
                                <ul>
                                    <li class="active"></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                            <a href="javascript:;" class="program_prev"></a>
                            <a href="javascript:;" class="program_next"></a>
                        </div>
                        <div class="small_item">
                            <div class="item_program">
                                <ul>
                                    <li><img src="images/line/family/equip4_2.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_3.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_4.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_5.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_6.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_7.jpg" alt=""></li>
                                </ul>
                            </div>
                            <div class="item_num">
                                <ul>
                                    <li class="active"></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                            <a href="javascript:;" class="program_prev"></a>
                            <a href="javascript:;" class="program_next"></a>
                        </div>
                        <div class="small_item">
                            <div class="item_program">
                                <ul>
                                    <li><img src="images/line/family/equip4_3.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_4.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_5.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_6.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_7.jpg" alt=""></li>
                                </ul>
                            </div>
                            <div class="item_num">
                                <ul>
                                    <li class="active"></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                            <a href="javascript:;" class="program_prev"></a>
                            <a href="javascript:;" class="program_next"></a>
                        </div>
                        <div class="small_item">
                            <div class="item_program">
                                <ul>
                                    <li><img src="images/line/family/equip4_4.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_5.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_6.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_7.jpg" alt=""></li>
                                </ul>
                            </div>
                            <div class="item_num">
                                <ul>
                                    <li class="active"></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                            <a href="javascript:;" class="program_prev"></a>
                            <a href="javascript:;" class="program_next"></a>
                        </div>
                        <div class="small_item">
                            <div class="item_program">
                                <ul>
                                    <li><img src="images/line/family/equip4_5.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_6.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_7.jpg" alt=""></li>
                                </ul>
                            </div>
                            <div class="item_num">
                                <ul>
                                    <li class="active"></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                            <a href="javascript:;" class="program_prev"></a>
                            <a href="javascript:;" class="program_next"></a>
                        </div>
                        <div class="small_item">
                            <div class="item_program">
                                <ul>
                                    <li><img src="images/line/family/equip4_6.jpg" alt=""></li>
                                    <li><img src="images/line/family/equip4_7.jpg" alt=""></li>
                                </ul>
                            </div>
                            <div class="item_num">
                                <ul>
                                    <li class="active"></li>
                                    <li></li>
                                </ul>
                            </div>
                            <a href="javascript:;" class="program_prev"></a>
                            <a href="javascript:;" class="program_next"></a>
                        </div>
                        <div class="small_item">
                            <div class="item_program">
                                <ul>
                                    <li><img src="images/line/family/equip4_7.jpg" alt=""></li>
                                </ul>
                            </div>
                            <div class="item_num">
                                <ul>
                                    <li class="active"></li>
                                </ul>
                            </div>
                            <a href="javascript:;" class="program_prev"></a>
                            <a href="javascript:;" class="program_next"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    .content{width:800px;height:600px;border:1px solid red;margin:0 auto;}
    .content .top_nav{width:800px;height:100px;}
    .content .top_nav li{float:left;}
    .content .top_nav li a{display:block;width:400px;height:100px;line-height:100px;text-align:center;color:orange;background-color:#fff;font-size:30px;}
    .content .top_nav li.active a{color:#fff;background-color:orange;}
    .top_con{width:800px;height:500px;background-color:#000;}
    .top_con .t_con{display:none;position:relative;overflow: hidden;}
    .top_con .t_con1{width:800px;height:500px;background-color:#666;}
    .top_con .t_con2{width:800px;height:500px;background-color:#aaa;} 
    .small_nav_box{width:800px;height:50px;overflow:hidden;position:relative;margin-top:25px;}
    .small_nav_box .small_nav{width:700px;height:50px;overflow:hidden;position:absolute;left:50px;}
    .small_nav_box ul{width:10000px;height:50px;overflow:hidden;left:0px;position:absolute;}
    .small_nav_box ul li{float:left;width:120px;height:50px;margin-right:20px;position:relative;background-color:#fff;cursor:pointer;text-align:center;line-height:50px;font-size:30px;}
    .small_nav_box ul li.active i{width:114px;height:44px;border:3px solid red;position:absolute;left:0px;top:0px;}
    .small_nav_box .small_prev{position:absolute;left:0px;top:0px;width:50px;height:50px;background-color:blue;color:#fff;text-align:center;line-height:50px;}
    .small_nav_box .small_next{position:absolute;right:0px;top:0px;width:50px;height:50px;background-color:blue;color:#fff;text-align:center;line-height:50px;}
    .small_con_box{width:800px;height:400px;background-color:red;margin-top:25px;overflow:hidden;position:relative;}
    .small_con_box .small_con{width:10000px;height:400px;position:absolute;left:0px;}
    .small_con_box .small_con .small_item{float:left;width:800px;height:400px;margin-right:10px;position:relative;text-align:center;}
    .small_con_box .small_con .small_item i{width:780px;height:380px;border:10px solid #fff;position:absolute;left:0px;top:0px;}
    .item_program {width:800px;height:400px;overflow:hidden;position:relative;}
    .item_program ul {width:99999px;left:0px;position:absolute;}
    .item_program ul li{float:left;width:800px;height:400px;}
    .item_program img{width:800px;height:400px;}
    .item_num{width:100%;position:absolute;left:0px;bottom:10px;text-align:center;}
    .item_num ul{display:inline-block;*display:inline;zoom:1;}
    .item_num ul li{float:left;width:15px;height:15px;border-radius:15px;background:orange;margin-right:10px;}
    .item_num ul li.active{background:red;}
    .small_item .program_prev{position:absolute;left:0px;top:40%;width:60px;height:60px;background-color:#fff;}
    .small_item .program_next{position:absolute;right:0px;top:40%;width:60px;height:60px;background-color:#fff;}