怎么把网页1的导航完美移植到网页2的轮播图上边的位置使导航和轮播图结合成一个网页

网页1带导航的
<!DOCTYPE html>



山东金泽网络科技有限公司


<script type="application/x-javascript">
    addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    }
</script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href="css/simpleLightbox.css" rel='stylesheet' type='text/css' />
<link href="css/fontawesome-all.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Poppins:100i,200,200i,300,400,400i,500,500i,600,600i,700,700i,800" rel="stylesheet">






金泽科技
aria-expanded="false" aria-label="Toggle navigation">






搜索
            </div>
        </nav>
    </div>
</header>
<!--//header-->




网页2   轮播图代码：

<!DOCTYPE html>





山东金泽网络科技有限公司


//定时器返回值 var time=null; //记录当前位子 var nexImg = 0; //用于获取轮播图图片个数 var imgLength = $(".c-banner .banner ul li").length; //当时动态数据的时候使用,上面那个删除 // var imgLength =0; //设置底部第一个按钮样式 $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black"); //页面加载 $(document).ready(function(){ // dynamicData(); //启动定时器,设置时间为3秒一次 time =setInterval(intervalImg,3000); }); //点击上一张 $(".preImg").click(function(){ //清楚定时器 clearInterval(time); var nowImg = nexImg; nexImg = nexImg-1; console.log(nexImg); if(nexImg<0){ nexImg=imgLength-1; } //底部按钮样式设置 $(".c-banner .jumpBtn ul li").css("background-color","white"); $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black"); //将当前图片试用绝对定位,下一张图片试用相对定位 $(".c-banner .banner ul img").eq(nowImg).css("position","absolute"); $(".c-banner .banner ul img").eq(nexImg).css("position","relative"); //轮播淡入淡出 $(".c-banner .banner ul li").eq(nexImg).css("display","block"); $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000); $(".c-banner .banner ul li").eq(nowImg).stop().animate({"opacity":0},1000,function(){ $(".c-banner ul li").eq(nowImg).css("display","none"); }); //启动定时器,设置时间为3秒一次 time =setInterval(intervalImg,3000); }) //点击下一张 $(".nexImg").click(function(){ clearInterval(time); intervalImg(); time =setInterval(intervalImg,3000); }) //轮播图 function intervalImg(){ if(nexImg<imgLength-1){ nexImg++; }else{ nexImg=0; } //将当前图片试用绝对定位,下一张图片试用相对定位 $(".c-banner .banner ul img").eq(nexImg-1).css("position","absolute"); $(".c-banner .banner ul img").eq(nexImg).css("position","relative"); $(".c-banner .banner ul li").eq(nexImg).css("display","block"); $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000); $(".c-banner .banner ul li").eq(nexImg-1).stop().animate({"opacity":0},1000,function(){ $(".c-banner .banner ul li").eq(nexImg-1).css("display","none"); }); $(".c-banner .jumpBtn ul li").css("background-color","white"); $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black"); } //轮播图底下按钮 //动态数据加载的试用应放在请求成功后执行该代码,否则按钮无法使用 $(".c-banner .jumpBtn ul li").each(function(){ //为每个按钮定义点击事件 $(this).click(function(){ clearInterval(time); $(".c-banner .jumpBtn ul li").css("background-color","white"); jumpImg = $(this).attr("jumpImg"); if(jumpImg!=nexImg){ var after =$(".c-banner .banner ul li").eq(jumpImg); var befor =$(".c-banner .banner ul li").eq(nexImg); //将当前图片试用绝对定位,下一张图片试用相对定位 $(".c-banner .banner ul img").eq(nexImg).css("position","absolute"); $(".c-banner .banner ul img").eq(jumpImg).css("position","relative"); after.css("display","block"); after.stop().animate({"opacity":1},1000); befor.stop().animate({"opacity":0},1000,function(){ befor.css("display","none"); }); nexImg=jumpImg; } $(this).css("background-color","black"); time =setInterval(intervalImg,3000); }); }); //动态数据轮播图 //动态数据加载的时候不要直接点击demo.html运行否则可能请求不到本地json数据 // function dynamicData(){ // $.ajax({ // url:"js/test.json", // type:"get", // dataType:"json", // success:function(data){ // if(data.code==1){ // var data = data.data; // $.each(data,function(i){ // $(".c-banner .banner ul").append('<li><img src="'+this.img+'"></li>'); // $(".c-banner .jumpBtn ul").append('<li jumpImg="'+i+'"></li>') // }) // } // //获取图片总数量 // imgLength = $(".c-banner .banner ul li").length; // //为底部按钮定义单击事件 // $(".c-banner .jumpBtn ul li").each(function(){ // //为每个按钮定义点击事件 // $(this).click(function(){ // clearInterval(time); // $(".c-banner .jumpBtn ul li").css("background-color","white"); // jumpImg = $(this).attr("jumpImg"); // if(jumpImg!=nexImg){ // var after =$(".c-banner .banner ul li").eq(jumpImg); // var befor =$(".c-banner .banner ul li").eq(nexImg); // // //将当前图片试用绝对定位,下一张图片试用相对定位 // $(".c-banner .banner ul img").eq(nexImg).css("position","absolute"); // $(".c-banner .banner ul img").eq(jumpImg).css("position","relative"); // // after.css("display","block"); // after.stop().animate({"opacity":1},1000); // befor.stop().animate({"opacity":0},1000,function(){ // befor.css("display","none"); // }); // nexImg=jumpImg; // } // $(this).css("background-color","black"); // time =setInterval(intervalImg,3000); // }); // }); // } // }) // }


将导航封装到一个页面，用<iframe src="你要嵌套的页面.html" frameborder="0" width="300" scrolling="No" height="200" leftmargin=...”
iframe引入即可用，