5讲项目实战js第二区域轮播器及选项卡

#5讲项目实战js第二区域轮播器及选项卡

 <!--整站建设步骤如下：

  1.构建一个宽度100% 高度149px 这样一个长方形，为了保证浏览器的兼容，我们加了*｛margin:0px;padding:0px;｝Top样式中的宽度100%也可以不写，因为浏览器已给出默认为100%宽。

  2.给个长方形盒子，添加一个背景图片，背景图片默认的会沿着水平方向平铺

  3.Top盒子里头部信息的构建 head里假如图片标签cart图像

  4.如何控制图片和文字对齐方式在垂直方向居中，控制文字的样式。单独控制某些文字可以加span标准单独控制样式。

  5.a标签特性，如何控制a标签的样式，去除标签自身的样式并重新定义，a标签的一个伪类a：hover。

  6.构建header盒子，设置居中，在里面构建三个盒子，设置三个盒子的浮动定位，

  7.制作导航，提到了a标签做导航布局时候各个标签间会有一个空隙的兼容问题（浮动）来解决。

  8.制作站内搜索部分，构建两个盒子 ，

  9.单独建立一个样式文件，通过外部引用调用样式表，注意外部CSS样式中引用的图片的位置变化，要向上返回一级目录

  10.构建用来放导航的长方形，然后居中，在这个长方形里构建连个小盒子 浮动布局 一个在左一个在右

  11.利用ul无序列表制作导航，这里么复习了以下文字的样式效果和a标签样式设置。

  12.构建长方形div，利用相对和绝对定位来控制它的位置。并且利用了透明技术和边框上边框的隐藏，代码的优先级别，后面的会覆盖前面的样式

  13.js 制作菜单活动效果

  14.二级菜单里面的样式，特别强调了，代码的一个继承关系 右边小导航的制作

  15.构建长方形div ，宽度1000px  高度 460px  设置水平距中 margin:0px auto;

  16.在这个长方形里面，构建两个小的长方形，一个左浮动距左，一个右浮动距右

  17.如何右边的长方形，放两张背景图片 backrgound:url(""),url("");

  18.上在的标题部分的处理方法，一个图片，一个背景图 (同时复习了内边距的概念)  添加底边框线

  19.利用ul 无序列表来制作选项卡按扭  backgound 包括了(background-image/repeat/color/position)

  20.构建一个长方形，用为放我们的选项卡对应的内容切换区

  21.讲到了和片轮播的原理: 构建一个和图片一样大小的长方形Part_imgCon，然后再这个里面构建一个足够大的长方形Part_ScrollCon  然后把Part_ScrollCon  设置为绝对定位元素可移动 Part_imgCon设置为相对定位，并且加下overflow:hidden;超出部分隐藏

  22.讲解了文字的显示和隐藏的原理，把ul的高度，设置为一个li的高度35px,并且给ul加上overflow:hidden;

  23.讲解了按扭的布局和他的显示的原因 鼠标放到那个li就给这个li加上 class="hover" 其它的li去掉class="hover"

 -->
 外部样式表部分：

*{margin:0px; padding:0px;}

#Top{/*width:100%;*/ height:149px; background:url("../images/headbg.jpg");}

#Top .head{width:1000px; height:30px;line-height:30px;  margin:0px auto;/*水平距中*/font-size:13px;font-family:"微软雅黑"; color:#666;}

#Top .head span{color:#E20076; font-weight:bold;/*加粗*/padding:0px 4px;}

#Top .head a{color:#666;text-decoration:none;/*去掉下划线*/ font-weight:800;/*加粗*/

    padding:0px 5px;}

#Top .head a:hover{color:#E20076;}/*鼠标放上去改变文字颜色*/
#header{width:1000px;height:70px;  margin:0px auto;}

#header .banner{width:221px; height:44px; float:left;/*左浮动*/ padding-top:14px;}

#header .logo{width:511px; height:70px;float:left;/*左浮动*/line-height:70px;font-size:16px;font-family:"微软雅黑"; padding-left:80px;}
#header .search{width:180px; height:35px;float:right;/*左浮动*/ padding-top:16px; position:relative;/*相对定位*/}

#header .logo a{color:#000; font-weight:bold; text-decoration:none;

     padding:0px 20px; float:left;}

#header .logo a:hover{color:#E20076;}
#header .search input.txt{width:140px; height:23px; border:1px solid #e1e1e1; font-size:12px; 

       color:#999; text-indent:10px;/*首行缩进*/ position:absolute; 

       left:0px; top:20px;}

#header .search input.but{width:26px; height:25px; background:url("../images/sosoh.jpg");

      border:0px;/*边框设置为0*/ position:absolute; left:141px; top:20px;}
/*导航样式*/

#Top .Nav{width:1000px; height:49px;margin:0px auto; }

#Top .Nav .mainNav{width:550px; height:49px;  float:left;}

#Top .Nav .smallNav{width:150px; height:49px;float:right;}
#Top .Nav .mainNav ul li{list-style-type:none;/*去掉圆点*/ width:100px; height:49px; float:left; line-height:49px; 

       text-align:center;/*文字水平距中*/

       font-size:14px;font-family:"微软雅黑"; position:relative;/*相对定位*/}

#Top .Nav .mainNav ul li a{ color:#fff; text-decoration:none;}

#Top .Nav .mainNav ul li .menu{width:350px; border:2px solid  #e10076;border-top:0px; position:absolute; 

       background:#fff;z-index:3;/*改变定位元素的上下关系(那个在上，那个在正下，值越大，越在上面)*/

        filter:Alpha(opacity=90);-moz-opacity: 0.9; opacity: 0.9;/*背景透明*/ left:0px; top:49px;

        display:none;/*隐藏*/ padding:10px;/*内边距*/}

#Top .Nav .mainNav ul li.hover{background:#B80064;}
#Top .Nav .mainNav ul li p{text-align:left;/*距左*/line-height:35px; border-bottom:1px dotted #ddd;}

#Top .Nav .mainNav ul li p span{font-weight:bold;}

#Top .Nav .mainNav ul li p a{color:#666;}

#Top .Nav .mainNav ul li p a:hover{color:#B80064;}
#Top .Nav .smallNav{line-height:49px; font-size:14px; font-family:"微软雅黑"; }

#Top .Nav .smallNav a{color:#fff; text-decoration:none; float:left; padding:0px 10px;}

#Top .Nav .smallNav a:hover{text-decoration:underline;/*加下划线*/}
/*广告样式*/

#Adv{width:100%;height:421px; background:red; position:relative;}

#Adv .ImgList{width:100%; height:421px; position:absolute;/*绝对定位*/ left:0px; top:0px;

z-index:2;}

#Adv ul.button li{width:50px; height:10px; background:#000; border:1px dotted #fff; float:left;

     margin:0px 5px; list-style-type:none; }

#Adv ul.button{ height:20px; position:absolute;left:43%; bottom:50px;z-index:3; display:inline-block;/*行内块级元素*/}

#Adv ul.button li.hover{background:#fff;}
/*第一部分样式*/

#Part1{width:1000px; height:460px; margin:35px auto;}

#Part1 #Part1_L{width:339px; height:440px; border:1px dashed #E20076; float:left; padding:6px;}

#Part1 #Part1_R{width:560px; height:442px; padding:0px 30px; background:url("../images/vl.jpg") no-repeat,url("../images/vr.jpg") no-repeat right top; float:right;}
#Part1 #Part1_R p.biaoti{height:90px; background:url("../images/lxtjbg.jpg") no-repeat right bottom; 

       border-bottom:1px dashed #c9c9c9;}

#Part1 #Part1_R ul.select_but{border-bottom:1px solid #eee; height:32px;}

#Part1 #Part1_R ul.select_but li{list-style-type:none; height:32px; width:84px;  float:left;

         font-size:14px;font-family:"微软雅黑"; text-align:center; line-height:32px;

         background:url("../images/lxtjcdbg.jpg") no-repeat right bottom;}

#Part1 #Part1_R ul.select_but li.hover{background-image:url("../images/lxtjcdxg.jpg");}

/*第一部分 ----内容样式*/

#Part1 #Part1_R .select_con{height:300px; margin-top:20px; overflow:hidden;}

#Part1 #Part1_R .select_con .select_content{height:300px; }
/*选项卡的图片列表效果*/

#Part1_R .select_con .select_content ul.sel_imgList li{width:126px; height:124px; float:left;

      list-style-type:none;margin:0px 6px 0px 7px; position:relative;/*相对定位*/}

#Part1_R .select_con .select_content ul.sel_imgList li p{/*height:41px;*/ background-color:rgba(187,14,115,0.7);

    color:#fff; font-size:12px;font-family:"微软雅黑"; padding:0px 5px; line-height:20px;

    position:absolute; left:0px; bottom:0px; height:0px; overflow:hidden;}

/*路线推荐的新闻列表*/

ul.IntroNews{ padding-top:20px;}

ul.IntroNews li{font-family:"微软雅黑"; font-size:14px; line-height:35px;

    text-indent:20px; background:url("../images/li_dian.png") no-repeat 6px 15px;}

ul.IntroNews li a{ color:#000; text-decoration:none;}

ul.IntroNews li a:hover{color:#E20076;}

ul.IntroNews li span{color:#E20076; font-weight:bold; float:right;}

/*内容区广告轮播效果*/

#Part1_L .Part_imgCon{width:339px; height:376px; background:red; position:relative; overflow:hidden;}

#Part1_L .Part_imgCon .Part_ScrollCon{height:376px; width:1000%; background:blue;

       position:absolute; left:0px; top:0px;}

#Part1_L .Part_imgCon .Part_ScrollCon img{float:left;}

 

/*滚动文字样式*/

#Part1_L ul.Part_ScrollTxt{height:35px; overflow:hidden; }

#Part1_L ul.Part_ScrollTxt li{list-style-type:none; font-size:14px;font-family:"微软雅黑"; line-height:35px;}

#Part1_L ul.Part_ScrollBut li{width:40px; height:8px;list-style-type:none;

     float:left; margin:0px 5px; background:#00a9e2;}

#Part1_L ul.Part_ScrollBut li.hover{background:#d81480;}

 <!doctype html>

<html lang="zh-cn">

<head>

<meta charset="gb2312">

<meta name="author" content="李明杰">

<meta name="keywords" content="湖南海外旅游有限公司 湖南长沙最好旅行社 湖南海外旅行社 长沙旅行社排名">

<meta name="description" content="湖南海外旅行社是湖南首批五星级旅行社，连续三年评为全国百强旅行社，国家特许经营出境 游组团社，长沙从事旅游业务最早、综合实力最强的旅游公司，主营出境旅游、国内旅游、入 境旅游、会议展览。">

<title>湖南海外旅游</title>

 <link rel="stylesheet" type="text/css" href="css/index.css">

</head>

<body>

 <div id="Top">

 <!-- 头部信息开始 -->

  <div class="head"><img src="images/cart.png" align="absmiddle"/> 全省免费服务热线： <span>96556</span> <span>0731-84635555</span>旅行社同行热线：<span>0731-84402588</span> <a href="#">登陆</a><a href="#">注册</a> 

  </div>

 <!-- 头部信息结束 -->

 <!-- banner开始 -->

   <div id="header">

    <div class="banner"><a href="#"><img src="images/logo.png"/></a></div>

    <div class="logo">

    <a href="#">首 页</a>

    <a href="#">出境游</a>

    <a href="#">国内游</a>

    <a href="#">特价游</a>

    <a href="#">签 证</a>

    </div>

    <div class="search">

    <form>

    <input type="text" class="txt" value="输入目的地" />

    <input type="submit" class="but"  value=""/>

    </form>

    </div>

   </div>

 <!-- banner结束 -->

 <!-- 导航开始 -->

  <div class="Nav">

   <div class="mainNav">

    <ul>

     <li ><a herf="#">出境跟团游</a>

      <div class="menu">

       <p><span>台湾港澳:</span> <a href="#">台湾 </a>|<a href="#"> 香港 </a>| <a href="#">澳门</a></p>

       <p><span>东南亚:</span> <a href="#">泰国</a> | <a href="#">新加坡</a> | <a href="#">马来西亚</a> | <a href="#">越南 </a>| <a href="#">柬埔寨</a> | <a href="#">老挝 </a>| <a href="#">印度</a> | <a href="#">尼泊尔</a></p>

      </div>

     </li>

     <li><a herf="#">国内跟团游</a>

         <div class="menu"></div>

     </li>

     <li><a herf="#">国内自由行</a>

      <div class="menu"></div>

     </li>

     <li><a herf="#">湖南周边游</a>

      <div class="menu"></div>

     </li>

     <li><a herf="#">出境自由行</a>

      <div class="menu"></div>

     </li>

    </ul>

   </div>

   <div class="smallNav">

   <a herf="#">泰国</a><a herf="#">台湾</a><a herf="#">普吉</a>

   </div>

  </div>

 <!-- 导航结束 -->

 </div>

 <!--网站头部结束--> 

<!--广告开始-->

<div id="Adv">

 <!--图片列表-->

 <div class="ImgList" style="background:url('images/adv1.jpg') center"></div>

 <div class="ImgList" style="background:url('images/adv2.jpg') center"></div>

 <div class="ImgList" style="background:url('images/adv3.jpg') center"></div>

 <div class="ImgList" style="background:url('images/adv4.jpg') center"></div>

 

 <!--轮播的按扭-->

 <ul class="button">

  <li class="hover"></li>

  <li></li>

  <li></li>

  <li></li>

 </ul>

</div>

<!--广告结束-->

<!--第一部分内容开始-->

<div id="Part1">

 <!--图片广告轮播效果开始-->

 <div id="Part1_L">

  <!--滚动内容begin-->

  <div class="Part_imgCon">

   <div class="Part_ScrollCon">

    <img src="images/part_adv1.jpg" />

    <img src="images/part_adv2.jpg" />

    <img src="images/part_adv3.jpg" />

    <img src="images/part_adv4.jpg" />

    <img src="images/part_adv5.jpg" />

   </div>

  </div>

  <!--滚动内容end-->

  <!--滚动文字开始-->

  <ul class="Part_ScrollTxt">

   <li>美国西海岸加州阳光十二日之旅</li>

   <li>我带老伴游江南华东感恩关爱主题旅游</li>

   <li>额济纳、胡杨林摄影观光双飞五日游</li>

   <li>巴厘岛蓝梦五星</li>

   <li>斯里兰卡海滨7天5晚小火车之旅</li>

  </ul>

  <!--滚动文字结束-->

  <!--滚动按扭开始-->

  <ul class="Part_ScrollBut">

   <li class="hover"></li>

   <li></li>

   <li></li>

   <li></li>

   <li></li>

  </ul>

  <!--滚动按扭结束-->

 </div>

 <!--图片广告轮播效果结束-->

 <div id="Part1_R">

  <p class="biaoti"><img src="images/introlx.jpg" /></p>

  <!--选项卡按扭开始-->

  <ul class="select_but">

   <li  class="hover">新品推荐</li>

   <li>热门推荐</li>

   <li>高端定制</li>

  </ul>

  <!--选项卡按扭结束-->

  

  <!--内容区开始-->

  <div class="select_con">

   <div class="select_content">

    <!--图片列表开始-->

    <ul class="sel_imgList">

     <li><img src="images/intro.jpg" width="126" height='124' />

      <p>我带老伴游江南华东感恩关爱主题旅游</p>

     </li>

     <li><img src="images/intro.jpg" width="126" height='124' />

      <p>我带老伴游江南华东感恩关爱主题旅游</p>

     </li>

     <li><img src="images/intro.jpg" width="126" height='124' />

      <p>我带老伴游江南华东感恩关爱主题旅游</p>

     </li>

     <li><img src="images/intro.jpg" width="126" height='124' />

      <p>我带老伴游江南华东感恩关爱主题旅游</p>

     </li>

    </ul>

    <!--图片列表结束-->

    <div style="clear:both;"></div>

    <!--新闻列表开始-->

    <ul class="IntroNews">

     <li><span>￥9990</span><a href="#">我带老伴游江南华东感恩关爱主题旅游</a></li>

     <li><span>￥9990</span><a href="#">海誓山盟 希腊 法瑞意十三日游</a></li>

     <li><span>￥5380</span><a href="#">台湾印象八日游</a></li>

     <li><span>￥9990</span><a href="#">泰包机泰享受五晚六日游</a></li>

    </ul>

    <!--新闻列表结束-->

 

   </div>

   <div class="select_content">

    <!--图片列表开始-->

    <ul class="sel_imgList">

     <li><img src="images/intro2.jpg" width="126" height='124' />

      <p>我带老伴游江南华东感恩关爱主题旅游</p>

     </li>

     <li><img src="images/intro2.jpg" width="126" height='124' />

      <p>我带老伴游江南华东感恩关爱主题旅游</p>

     </li>

     <li><img src="images/intro2.jpg" width="126" height='124' />

      <p>我带老伴游江南华东感恩关爱主题旅游</p>

     </li>

     <li><img src="images/intro2.jpg" width="126" height='124' />

      <p>我带老伴游江南华东感恩关爱主题旅游</p>

     </li>

    </ul>

    <!--图片列表结束-->

    <div style="clear:both;"></div>

    <!--新闻列表开始-->

    <ul class="IntroNews">

     <li><span>￥9990</span><a href="#">2华东感恩关爱主题旅游</a></li>

     <li><span>￥9990</span><a href="#">海誓山盟 希腊 法瑞意十三日游</a></li>

     <li><span>￥5380</span><a href="#">台湾印象八日游</a></li>

     <li><span>￥9990</span><a href="#">泰包机泰享受五晚六日游</a></li>

    </ul>

    <!--新闻列表结束-->

   </div>

   <div class="select_content">高端定制</div>

  </div>

  <!--内容区结束-->

 </div>

</div>

<!--第一部分内容结束-->

 

 

 <script type="text/javascript" src="js/jquery.js"></script>

 <script type="text/javascript" >

  var d_Value=$(".search input.txt").val();// 获取到它的默认值

  //获取焦点时，即鼠标点击到输入框时，将文本框清空内容

  $(".search input.txt").focus(function(){// $查找获取对象元素.txt 鼠标放上时文本输入框获取焦点

   //$(this)等同于我们的$(".search input.txt")

   if($(this).val()==d_Value){//如果文本框值为默认值"输入目的地点"，则重新赋值文本框内容为空

    $(this).val("");

   }

  });

  //失去焦点时

  $(".search input.txt").blur(function(){// $查找获取对象元素.txt 鼠标放上时文本输入框获取焦点

   //$(this)等同于我们的$(".search input.txt")

   if($(this).val()==""){//如果值为空，则赋值为默认值"输入目的地点"

    $(this).val(d_Value);

   }

  });

  //二级菜单的现实和隐藏。移动鼠标到li标签上和离开li标签所执行的两个函数即两个动作

  $(".Nav .mainNav ul li").hover(function(){

   $(this).find(".menu").show();//显示menu盒子即二级菜单

   $(this).addClass("hover");//给li标签添加hover样式

   },function(){

    $(this).find(".menu").hide();//隐藏menu盒子即二级菜单

    $(this).removeClass("hover");//去除li标签hover样式

  

  });

  //=======广告轮播图的实现=======

 var _index=0;//初始化序列

 var timePlay=null;

 $("#Adv .ImgList").eq(0).show().siblings("div").hide();//最开始显示第一张

 $("ul.button li").hover(function(){/*鼠标在上面*/ 

  clearInterval(timePlay);//清处定时播放器

  _index=$(this).index();//获取当前li序列号

  //alert(_index);//弹窗

  $(this).addClass("hover").siblings().removeClass("hover");//显示按扭

  //fadeIn  淡入  fadeOut 淡出  

  $("#Adv .ImgList").eq(_index).fadeIn().siblings("div").fadeOut();//显示图片

 },function(){/*鼠标移开*/

  autoPlay();//启用定时播放器

 });

 //自动轮播

 //构建自动轮播的函数

 function autoPlay(){

  //alert("sss");

  //设置定时器

  timePlay=setInterval(function(){

   _index++;

   if(_index<4){

    if(_index==3){_index=-1; }//变成-1 

    $("ul.button li").eq(_index).addClass("hover").siblings().removeClass("hover");//显示按扭

    $("#Adv .ImgList").eq(_index).fadeIn().siblings("div").fadeOut();//显示图片

     

   }else{_index=-1;/*设置序列号为-1,跳到播放第一张图片*/}

  },2000); 

 };

 autoPlay();//调用和执行

 

 //路线推荐先项卡效果

 //鼠标滑上去的效果 mouseover

 $("ul.select_but li").mouseover(function(){

  $(this).addClass("hover").siblings().removeClass("hover");//改变选项卡样式

  //$(this).index();序列号

  $(".select_con .select_content").eq($(this).index()).show().siblings().hide();//改变内容区

 });

 //路线推荐 图片文字滑动效果

 $("ul.sel_imgList li").hover(function(){

   $(this).find("p").stop().animate({height:"41px"},200)

 },function(){

   $(this).find("p").stop().animate({height:"0px"},200)

   });

 //第一部分内容区广告轮播效果

var _index2=0;//定义了序列号变量

var timeInterval=null;

$("ul.Part_ScrollBut li").hover(function(){

  clearInterval(timeInterval);//清除定时器

  _index2=$(this).index();//获取当前的序列号

  $(this).addClass("hover").siblings().removeClass("hover");//当前li添加 class="hover" 其它li移除

  $(".Part_ScrollCon").animate({left:"-"+_index2*339+"px"},1000);

  $("ul.Part_ScrollTxt li").eq(_index2).show().siblings().hide();//序列相同的li显示，其它的隐藏

},function(){autoPlay2();

  

});

//自动轮播

function autoPlay2(){

  timeInterval=setInterval(function(){ 

   _index2++;//序列号加1

   if(_index2==4){_index2=-1;}

   if(_index2==5){_index2=0;}

   if(_index2<=4){     

    $("ul.Part_ScrollBut li").eq(_index2).addClass("hover").siblings().removeClass("hover");//当前li添加 class="hover" 其它li移除

    $(".Part_ScrollCon").animate({left:"-"+_index2*339+"px"},1000);

    $("ul.Part_ScrollTxt li").eq(_index2).show().siblings().hide();

   }else{_index2=-1;}//这个地方要不要

  },3000);

};

autoPlay2();

 </script>

</body>

</html>