15讲项目实战内页展示区收尾

#15讲项目实战内页展示区收尾

 /*内页主体样式*/
img{border:0px;}
.webBody{background:#f4f4f4;}
/*面包屑导航样式*/
.webLogo {width:1000px; height:68px;  margin:0px auto; border-bottom:2px solid #dd85b3;
   background:url("../images/position.png") no-repeat left center; font-size:14px;
   line-height:68px; text-indent:20px;}
.webLogo a{color:#666; text-decoration:none; }
.webLogo a:hover{color:#e20076; text-decoration:underline;}

#WebCon{width:1000px;  background:url("../images/webbg1.png") no-repeat,
         url("../images/webbg2.png") no-repeat right top #fff; margin:0px auto; border:1px solid red;}
#web_Menu{width:940px; margin:30px auto 15px;}
#web_Menu dl{width:100%;height:30px;  margin-bottom:5px;}
#web_Menu dl dt{width:180px; height:30px; background:#ededed; float:left; font-size:14px;
    text-align:center;line-height:30px; font-weight:bold;}
#web_Menu dl dt a{display:block; color:#000; text-decoration:none; cursor:default;/*鼠标状态*/}
#web_Menu dl dt a:hover{background:#e10076; color:#fff;}
#web_Menu dl dd{width:758px;height:30px; background:#f4f4f4; float:right; line-height:30px; }
#web_Menu dl dd a{font-size:14px; color:#000;text-decoration:none;
     float:left; padding:0px 10px;}
#web_Menu dl dd a:hover{color:#e10076;}

/*第页第一部分样式*/
#webPart1{width:940px;margin:0px auto 40px;}
img.webbg3{ display:block;margin:0px auto;}
/*左边轮播器样式*/
#webPart1_l{width:361px; height:270px; float:left; position:relative;}
#webPart1_l .webAdvcon{width:361px;height:270px;  position:relative;/*相对定位元素*/overflow:hidden;}
#webPart1_l .webAdvcon img{position:absolute;/*绝对定位*/ /*left top bottom right*/}

#webPart1_l ul.webAdvbutton{width:105px; height:25px;position:absolute; bottom:5px;
       right:0px; z-index:333;}
#webPart1_l ul.webAdvbutton li{width:20px; height:20px; background:rgba(255,255,255,0.5); float:left;
     border:1px solid #fff; margin:0px 2px; font-size:12px; text-align:center;
     line-height:20px; cursor:pointer;}
#webPart1_l ul.webAdvbutton li.hover{background:#f66e08;color:#fff; border:1px solid #e63003;}

#webPart1_l dl.text{width:361px; height:38px; background:rgba(0,0,0,0.5); overflow:hidden; 
     position:absolute; left:0px; bottom:0px; z-index:22;}
#webPart1_l dl.text dd{height:38px; color:#fff; font-size:14px; line-height:38px;
     text-indent:10px;}

 

 

#webPart2_r{width:568px; height:270px; background:#f9f9f9; float:right; border:1px dashed #e20076;
   position:relative;}
#webPart2_r img.dirl{position:absolute; left:0px; top:100px;}
#webPart2_r img.dirr{position:absolute; right:0px; top:100px;}
#webPart2_r #webPart2_Scroll{width:504px; height:210px; overflow:hidden;/*隐藏*/ margin:40px auto 0px; position:relative;}
#webPart2_r #webPart2_Scroll .webPart2_ScrollCon{width:1000%;height:210px; position:absolute; 
        left:0px;/*滚动就是改变他的值*/}
#webPart2_r #webPart2_Scroll .webPart2_ScrollCon dl{width:150px;height:210px; float:left; margin:0px 9px;}
#webPart2_r #webPart2_Scroll .webPart2_ScrollCon dl dt{width:150px; height:150px; background:yellow;}
#webPart2_r #webPart2_Scroll .webPart2_ScrollCon dl dd{font-size:12px; text-align:center; height:25px;
       line-height:25px;}
#webPart2_r #webPart2_Scroll .webPart2_ScrollCon dl dd a{color:#000; text-decoration:none;}
#webPart2_r #webPart2_Scroll .webPart2_ScrollCon dl dd a:hover{color:#e10076;}
#webPart2_r #webPart2_Scroll .webPart2_ScrollCon dl dd span{color:#e10076; font-weight:bold;}

 

/*内页第二部分的样式*/
.webProduct{width:950px; height:500px; margin:0px auto 20px;}
.webProduct p.Product_Title{height:49px; background:url("../images/web_ht.jpg"); 
       line-height:49px; text-align:right; padding-right:10px; }
.webProduct p.Product_Title span{font-size:20px; font-weight:bold; float:left;}
.webProduct p.Product_Title span font{ font-size:30px;color:#fff;width:41px;display:inline-block;text-align:center; padding-right:10px;}
.webProduct p.Product_Title a{color:#666; text-decoration:none;  font-size:14px; margin:0px 5px;}
.webProduct p.Product_Title a:hover{color:#e10076;}

.webProduct dl{width:280px; height:370px; border:5px solid #e10076; border-left:1px dashed #e10076;
    border-right:1px dashed #e10076; float:left; margin:30px 16px; border-radius:5px;}
.webProduct dl dt{text-align:center; padding-top:5px;}
.webProduct dl dd.title{height:45px; font-size:14px; text-align:center; line-height:45px;}
.webProduct dl dd.title a{color:#000; text-decoration:none;}
.webProduct dl dd.title a:hover{color:#e10076;}
.webProduct dl dd.price{width:137px; height:38px; background:#e10076; margin:0px auto; border-radius:10px;
      color:#fff; font-size:16px; text-align:center;line-height:38px;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码-->
  <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  <!--当前页面的三要素-->
  <title>魔鬼训练班_静态网站首页开发二</title>
  <meta name="Keywords" content="关键词,关键词">
  <meta name="description" content=""> 
  <!--css , js-->
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/public.css">

 </head>
<body class="webBody">
<!--网站头部开始-->
<div id="Top">
 <!--头部信息开始-->
 <div class="head"><img src="images/cart.png" align='absmiddle'/>&nbsp;全省免费服务热线：
   <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 href="#">出境跟团游</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>
      <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 href="#">出境自由行</a>
     <div class="menu"></div>
    </li>

    <li><a href="#">国内跟团游</a>
     <div class="menu"></div>
    </li>

    <li><a href="#">国内自由行</a>
     <div class="menu"></div>
    </li>

    <li><a href="#">湖南周边游</a>
     <div class="menu"></div>
    </li>
   </ul>
  </div>

  <div class="smallNav"><a href="#">泰国</a> <a href="#">台湾</a> <a href="#">普吉</a></div>
 </div>
 <!--导航结束-->
</div> 
<!--网站头部结束--> 

<!--内页主体内容开始-->
<!--面包屑导航开始-->
<div class="webLogo">您现在所在的位置：<a href="">首页</a> >> <a href="">出境跟团游</a></div>
<!--面包屑导航结束-->
<div id="WebCon">
 <!--内页二级菜单开始-->
 <div id="web_Menu">
  <dl>
   <dt><a href="javascript:void(0)">台湾港澳</a></dt>
   <dd><a href="">台湾</a> <a href="">香港</a> <a href="">澳门</a></dd>
  </dl>
  <dl>
   <dt><a href="javascript:void(0)">东南亚</a></dt>
   <dd><a href="">香港</a> <a href="">香港</a> <a href="">澳门</a></dd>
  </dl>
  <dl>
   <dt><a href="javascript:void(0)">台湾港澳</a></dt>
   <dd><a href="">美洲:</a> <a href="">香港</a> <a href="">澳门</a></dd>
  </dl>
  <dl>
   <dt><a href="javascript:void(0)">台湾港澳</a></dt>
   <dd><a href="">台湾</a> <a href="">香港</a> <a href="">澳门</a></dd>
  </dl>
  <dl>
   <dt><a href="javascript:void(0)">台湾港澳</a></dt>
   <dd><a href="">美洲:</a> <a href="">香港</a> <a href="">澳门</a></dd>
  </dl>
  <dl>
   <dt><a href="javascript:void(0)">台湾港澳</a></dt>
   <dd><a href="">台湾</a> <a href="">香港</a> <a href="">澳门</a></dd>
  </dl>
 </div>
 <!--内页二级菜单结束-->

 <!--内页第一个部分开始-->
 <img src="images/webbg3.jpg" class="webbg3"/>

 

 <div id="webPart1">
  <!--左边开始  内页广告轮播器 start-->
  <div id="webPart1_l">
   <!--图片列表 start-->
   <div class="webAdvcon">
    <img src="images/webadv1.jpg"  width='361' height='270' style="z-index:2"/>
    <img src="images/webadv2.jpg"  width='361' height='270'/>
    <img src="images/webadv3.jpg"  width='361' height='270'/>
    <img src="images/webadv4.jpg"  width='361' height='270'/>
   </div>
   <!--图片列表 end-->

   <!--按扭开始-->
   <ul class="webAdvbutton">
    <li class="hover">1</li>
    <li >2</li>
    <li>3</li>
    <li>4</li>
   </ul>
   <!--按扭结束-->

   <!--文字样式start-->
   <dl class="text">
    <dd>以色列八日文化之旅</dd>
    <dd>美国西海岸双城记八日游</dd>
    <dd>海外独家自驾系列- 迪拜豪车、高尔夫五日游</dd>
    <dd>日本北海道本州品质七日游</dd>
   </dl>
   <!--文字样式end-->
  </div>
  <!--左边结束 内页广告轮播器 end-->

 

 

 

  <!--右边开始-->
  <div id="webPart2_r">
   <img src="images/dirl.jpg" class="dirl" />
   <img src="images/dirr.jpg" class="dirr" />
   <!--scroll begin-->
   <div id="webPart2_Scroll">
    <div class="webPart2_ScrollCon">
     <dl>
      <dt><a href="#"><img src="images/intro.jpg" width='150' height='150' /></a></dt>
      <dd><a href="#">马尔代夫泰姬珊瑚四晚1</a></dd>
      <dd>抢购价：<span>13760元</span></dd>
     </dl>
     <dl>
      <dt><a href="#"><img src="images/intro2.jpg" width='150' height='150' /></a></dt>
      <dd><a href="#">马尔代夫泰姬珊瑚四晚2</a></dd>
      <dd>抢购价：<span>13760元</span></dd>
     </dl>
     <dl>
      <dt><a href="#"><img src="images/intro.jpg" width='150' height='150' /></a></dt>
      <dd><a href="#">马尔代夫泰姬珊瑚四晚3</a></dd>
      <dd>抢购价：<span>13760元</span></dd>
     </dl>
     <dl>
      <dt><a href="#"><img src="images/intro2.jpg" width='150' height='150' /></a></dt>
      <dd><a href="#">马尔代夫泰姬珊瑚四晚4</a></dd>
      <dd>抢购价：<span>13760元</span></dd>
     </dl>
     <dl>
      <dt><a href="#"><img src="images/intro.jpg" width='150' height='150' /></a></dt>
      <dd><a href="#">马尔代夫泰姬珊瑚四晚5</a></dd>
      <dd>抢购价：<span>13760元</span></dd>
     </dl>
     <dl>
      <dt><a href="#"><img src="images/intro2.jpg" width='150' height='150' /></a></dt>
      <dd><a href="#">马尔代夫泰姬珊瑚四晚6</a></dd>
      <dd>抢购价：<span>13760元</span></dd>
     </dl>
     <dl>
      <dt><a href="#"><img src="images/intro.jpg" width='150' height='150' /></a></dt>
      <dd><a href="#">马尔代夫泰姬珊瑚四晚7</a></dd>
      <dd>抢购价：<span>13760元</span></dd>
     </dl>
    </div>
   </div>
   <!--scroll end-->

  </div>
  <!--右边结束-->
 <div style="clear:both;"></div>
 </div>
 <!--内页第一个部分结束-->

 <!--东南亚开始-->
 <div class="webProduct">
  <p class="Product_Title"><span><font>1F</font>东南亚</span>
     <a href="#">泰国</a><a href="#">泰国</a><a href="#">泰国</a></p>
     <div style="clear:both;"></div>
  
  <dl>
   <dt><a href=""><img src="images/part_adv2.jpg" width='270' height='270'/></a></dt>
   <dd class="title"><a href="">世外桃源-芭堤雅、象岛、曼谷5晚6日游</a></dd>
   <dd class='price'>门市价格：2860</dd>
  </dl>

  <dl>
   <dt><a href=""><img src="images/part_adv2.jpg" width='270' height='270'/></a></dt>
   <dd class="title"><a href="">世外桃源-芭堤雅、象岛、曼谷5晚6日游</a></dd>
   <dd class='price'>门市价格：2860</dd>
  </dl>

  <dl>
   <dt><a href=""><img src="images/part_adv2.jpg" width='270' height='270'/></a></dt>
   <dd class="title"><a href="">世外桃源-芭堤雅、象岛、曼谷5晚6日游</a></dd>
   <dd class='price'>门市价格：2860</dd>
  </dl>
 </div>
 <!--东南亚结束-->

 <!--东南亚开始-->
 <div class="webProduct">
  <p class="Product_Title"><span><font>1F</font>东南亚</span>
     <a href="#">泰国</a><a href="#">泰国</a><a href="#">泰国</a></p>
     <div style="clear:both;"></div>
  
  <dl>
   <dt><a href=""><img src="images/part_adv2.jpg" width='270' height='270'/></a></dt>
   <dd class="title"><a href="">世外桃源-芭堤雅、象岛、曼谷5晚6日游</a></dd>
   <dd class='price'>门市价格：2860</dd>
  </dl>

  <dl>
   <dt><a href=""><img src="images/part_adv2.jpg" width='270' height='270'/></a></dt>
   <dd class="title"><a href="">世外桃源-芭堤雅、象岛、曼谷5晚6日游</a></dd>
   <dd class='price'>门市价格：2860</dd>
  </dl>

  <dl>
   <dt><a href=""><img src="images/part_adv2.jpg" width='270' height='270'/></a></dt>
   <dd class="title"><a href="">世外桃源-芭堤雅、象岛、曼谷5晚6日游</a></dd>
   <dd class='price'>门市价格：2860</dd>
  </dl>
 </div>
 <!--东南亚结束-->

 

</div>
<!--内页主体内容结束-->

<!--网站底部开始-->
<div id="Footer">
 <div class="Footer_con">
 <!--左banner start-->
  <div class="Footer_conL">
   <img src="images/fbanner.png" />
   <div class="bshare-custom icon-medium" style="padding-top:15px;"><a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到新浪微博" class="bshare-sinaminiblog"></a><a title="分享到人人网" class="bshare-renren"></a><a title="分享到腾讯微博" class="bshare-qqmb"></a><a title="分享到网易微博" class="bshare-neteasemb"></a><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><span class="BSHARE_COUNT bshare-share-count">0</span></div><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh"></script><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
  </div>
 <!--左banner end-->
  <div class="Footer_conR">
   <dl>
    <dt><a href="">服务承诺</a></dt>
    <dd><a href="">我们的服务</a></dd>
    <dd><a href="">我们的承诺</a></dd>
    <dd><a href="">荣誉</a></dd>
   </dl>
   <dl>
    <dt><a href="">技术实力</a></dt>
    <dd><a href="">专家推荐</a></dd>
    <dd><a href="">热门推荐</a></dd>
    <dd><a href="">网友推荐</a></dd>
   </dl>

   <dl>
    <dt><a href="">服务承诺</a></dt>
    <dd><a href="">我们的服务</a></dd>
    <dd><a href="">我们的承诺</a></dd>
    <dd><a href="">荣誉</a></dd>
   </dl>
   <dl>
    <dt><a href="">关于我们</a></dt>
    <dd><a href="">公司介绍</a></dd>
    <dd><a href="">新闻动态</a></dd>
    <dd><a href="">招贤纳士</a></dd>
    <dd><a href="">联系我们</a></dd>
   </dl>
  </div>
 </div>
</div>
<!--网站底部结束-->
<!--网站版权信息start-->
<div id="Copy">
 湖南海外旅游有限公司 版权所有[e-mail]<br/>
 湘ICP备14003721号-2 旅行社业务经营许可证号:L-HUN-CJ00008 法定代表人：陈力 湖南省旅游局投诉电话：[phone]<br/>
 <span>友情链接:</span> <a href="">湖南省旅游</a>  <a href="">旅行社业务</a>  <a href="">海外旅游有</a>
</div>
<!--网站版权信息end-->

<!--底部广告start-->
<div id="fixedBox"><div id="fixedBox_Con">
 <ul>
  <li class="li1">全省免费服务热线： <span>96556</span></li>
  <li class="li2">旅游咨询 <a href="http://wpa.qq.com/msgrd?v=3&uin=783733618&site=qq&menu=yes" target="_blank">点击QQ咨询</a></li>
  <li class="li3"><img src="images/fixedHot.png" /> <a href="" target="_blank">当前最新活动</a></li>
  <li class="li4">
   <a href="#" class='wxrelative'>
      <img src="images/fixedWx.png" class="wx"/>
      <img src="images/erweima.png"  class="erm"/>
   </a>
   <a href="#"><img src="images/fixedWb.png" /></a>
   <a href="http://wpa.qq.com/msgrd?v=3&uin=783733618&site=qq&menu=yes" target="_blank"><img src="images/fixedQQ.png" /></a>
   <a href="#Top"><img src="images/fixedDir.png" /></a>
   
  </li>
 </ul>
</div></div>
<!--底部广告end-->

<!--在线客服QQ start-->
<div id="Kf">
 <ul>
  <li><a href="#">境外线路</a></li>
  <li><a href="#">海岛线路</a></li>
  <li><a href="#">国内线路</a></li>
  <li><a href="#">省内线路</a></li>
 </ul>

 <p><a href="#"><img src="images/kfQQ.png" /></a></p>
 <div class="kfWx"><img src="images/erweima.png" /></div>
</div>
<script type="text/javascript" src="js/flqq.js"></script>

<!--在线客服QQ end-->

<!--
 1、构建一个长方形盒子，利用绝对定位，把他移动到最右边
 2、给这个长方形，添加背景图
 3、利用ul 无序列表来制作四个客服， 分别控制每个li高度，水平竖直距中显示

 
-->

<!--引用外部jquery类库-->
<script type="text/javascript" src="js/jquery.js"></script>
<!--最后面引用-->
<script type="text/javascript" src="js/index.js"></script>

</body>
</html>

 var d_Value=$(".search input.txt").val();//获取到他的默认的值
 //获取焦点时
 $(".search input.txt").focus(function(){
 //$(this)同等于我们的 $(".search input.txt")
  if($(this).val()==d_Value){
   $(this).val("");//当前输入框的值设置为空
   //$(this).css("border","1px solid red");
  }
 });
 //失去焦点
 $(".search input.txt").blur(function(){
  if($(this).val()==""){
   $(this).val(d_Value);//给他赋他的初始值
  }
 });

 //二级菜单的实现
 $(".Nav .mainNav ul li").hover(function(){
  $(this).find(".menu").show();//显示 .menu 盒子
  $(this).addClass("hover");//给li添加 class="hover"
 },function(){
  $(this).find(".menu").hide();//隐藏
  $(this).removeClass("hover");//移除 li class="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();//调用和执行

 

 //路线推荐 图片文字滑动效果
 $("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==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();
     if(_index2==4){_index2=-1;}
   }else{_index2=-1;}//这个地方要不要
  },3000);

};
autoPlay2();

//第三部分 Part3选项卡样式   
function partComm(selBut,imgCon,Con){
  //alert(selBut+"---"+imgCon +Con);
  var _index3=0;
  $(selBut).mouseover(function(){
  _index3=$(this).index();
  $(this).addClass("hover").siblings().removeClass("hover");
  $(imgCon).eq(_index3).show().siblings().hide();
  $(Con).eq(_index3).show().siblings().hide();
});

};

//把通用的代码，封装在函数，通传参的方式，来调用
partComm("#Part3 p.title a.sel_a","#Part3 .part3Con .Part3ConL img","#Part3 .Part3ConR .Part3ConR_comm");
partComm("#Part4 p.title a.sel_a","#Part4 .part3Con .Part3ConL img","#Part4 .Part3ConR .Part3ConR_comm");

function partComm2(selBut,Con){
  //alert(selBut+"---"+imgCon +Con);
  var _index3=0;
  $(selBut).mouseover(function(){
  _index3=$(this).index();
  $(this).addClass("hover").siblings().removeClass("hover");
  $(Con).eq(_index3).show().siblings().hide();
});

};

partComm2("#part5 ul.part5_selbut li","#part5 .part5_Con .part5_content");
//路线推荐先项卡效果
//鼠标滑上去的效果 mouseover
partComm2("ul.select_but li",".select_con .select_content");

$(".part5_content .part5Comm").hover(function(){
 //$(this).find("p").stop().slideUp();//从下往上收缩
  $(this).find("p").stop(true,true).slideDown();//从上向下慢慢展开
},function(){
  $(this).find("p").stop(true,true).slideUp();//从下往上收缩
  //$(this).find("p").stop().slideDown();//从上向下慢慢展开
});

//微信二维码显示
$("#fixedBox_Con ul li.li4 a.wxrelative").hover(function(){
  $(this).find("img.erm").show();
},function(){
  $(this).find("img.erm").hide();
});

//横浮广告显示

$(window).scroll(function(){
 var Top=$(window).scrollTop();//滚动的高度
 if(Top>1000){
  $("#fixedBox").addClass("scrollDisplay"); //当他滚动高度大于1000 就加上样式 class="scrollDisplay"
 }else{
   $("#fixedBox").removeClass("scrollDisplay");
 }
});

//在线客服关闭功能
$("#Kf img.but_close").click(function(){
 $("#Kf").hide();//隐藏 
});

//内页图片左右切换效果
 //左按扭切换效果
 var click_num=0;//点击次数
 var setTime3=null;//向左定时器
 var setTime4=null;//向右定时器
 var len=$("#webPart2_Scroll .webPart2_ScrollCon dl").length;//获取有多少个 dl(图片列表)
$("#webPart2_r img.dirl").click(function(){
  clearInterval(setTime3);//清除定时器
  click_num++;// 点击次数加1
  //alert(click_num);
  if(click_num<len-2){
  $("#webPart2_Scroll .webPart2_ScrollCon").animate({left:-168*click_num+"px"},1000);
  }else{alert("到头了"); click_num=len-3;}
});

 //右切换按扭效果
 $("#webPart2_r img.dirr").click(function(){
   clearInterval(setTime3);//清除定时器
   click_num--;//点击次数减1 
   //alert(click_num);
  if(click_num>=0){
   $("#webPart2_Scroll .webPart2_ScrollCon").animate({left:-168*click_num+"px"},1000);
  }else{alert("右边到头了!!"); click_num=0;}
 });

 //自动轮播

function autoPlay3(){
  setTime3=setInterval(function(){
   //alert("ss");
   click_num++;// 点击次数加1
   if(click_num<len-2){
    $("#webPart2_Scroll .webPart2_ScrollCon").animate({left:-168*click_num+"px"},1000);
   }else{click_num=len-3; autoPlay4();clearInterval(setTime3);//清除定时器 
    }
  },1000);

   
   //alert("自动轮播");
   }
autoPlay3();//调用函数

function autoPlay4(){
  setTime4=setInterval(function(){

   click_num--;//点击次数减1 
  if(click_num>=0){
   $("#webPart2_Scroll .webPart2_ScrollCon").animate({left:-168*click_num+"px"},1000);
  }else{ click_num=0;autoPlay3();clearInterval(setTime4);//清除定时器
   }

  },1000);
}

 

//内页广告轮播器样式
var web_index=0;
var up_click=0;
var sjs=0;
var arrylist=null;
$("ul.webAdvbutton li").click(function(){
 web_index=$(this).index();//获取当前点击li的序列号，赋给变量 web_index;
 $(this).addClass("hover").siblings().removeClass("hover");//当前点击的加上 class="hover" 其它 li 移除class="hover"
 $(".webAdvcon img").eq(up_click).css("z-index","3");//把移走的那张图片调到最上面
 $(".webAdvcon img").eq(web_index).css("z-index","2")
 //文字动画效果
 $(".text dd").eq(web_index).show().siblings().hide();
  sjs=getRandom(4)-1;
  arrylist=[{"top":"-270px"},{"right":"-361px"},{"bottom":"-270px"},{"left":"-361px"}];
  
  if(up_click==web_index){}else{//当前面点击的序列号和现在点击的序列号不相等时，就执行
 //if(sjs==1){
   $(".webAdvcon img").eq(up_click).stop(true,true).animate(arrylist[sjs],500,function(){
   //$(".webAdvcon img").eq(0).css({"top":"0px","z-index":"0"});
   $(".webAdvcon img").eq(up_click).removeAttr("style");
   up_click=web_index;//保存发前按扭点击对应的序列号
   });
 //}
}

/*
 if(sjs==2){
  $(".webAdvcon img").eq(up_click).animate({"right":"-361px"},1000,function(){
  //$(".webAdvcon img").eq(up_click).css({"right":"0px","z-index":"0"});
  $(".webAdvcon img").eq(up_click).removeAttr("style");
  up_click=web_index;//保存发前按扭点击对应的序列号
  }); 
 }

 if(sjs==3){
  $(".webAdvcon img").eq(up_click).animate({"bottom":"-270px"},1000,function(){
  //$(".webAdvcon img").eq(up_click).css({"bottom":"0px","z-index":"0"});
  $(".webAdvcon img").eq(up_click).removeAttr("style");
  up_click=web_index;//保存发前按扭点击对应的序列号
  });
  
 }

 if(sjs==0){
  $(".webAdvcon img").eq(up_click).animate({"left":"-361px"},1000,function(){
  //$(".webAdvcon img").eq(up_click).css({"left":"0px","z-index":"0"}); 
  $(".webAdvcon img").eq(up_click).removeAttr("style");
  up_click=web_index;//保存发前按扭点击对应的序列号
  }); 
  
 }
*/
});

 

//随机函数，获到到 0-n之间的整数
function getRandom(n){
   return Math.floor(Math.random()*n+1)    
        }