$(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;}