目录
一、前言
自适应响应式汽车自驾游网页设计实例，应用html+css+js，适用于旅游网站、大学生网页课程作业设计，供大家参考。
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
1.HTML
代码如下（节选示例）：
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>车行天下</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.touchSlider.js"></script>
<script src="js/flashjs.js"></script>
<script src="js/pic_scroll.js"></script>
<script src="js/tabjs.js"></script>
<script src="js/jquery.soChange-min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(".dlxhotbox li .rsp").hide();
$(".dlxhotbox li").hover(function(){
$(this).find(".rsp").stop().fadeTo(500,0.8)
$(this).find(".text").stop().animate({left:'0'}, {duration: 500})
},
function(){
$(this).find(".rsp").stop().fadeTo(500,0)
$(this).find(".text").stop().animate({left:'600'}, {duration: "fast"})
$(this).find(".text").animate({left:'-500'}, {duration: 0})
});
//数字导航切换及自定义当前数字的class
$('#change_3 .a_bigImg').soChange({
thumbObj:'#change_3 .ul_change_a2 span',
thumbNowClass:'on',//自定义导航对象当前class为on
changeType:'slide',//定义对象切换方式为slide
changeTime:4000//自定义切换时间为4000ms
});
$('#change_4 .a_bigImg').soChange({
thumbObj:'#change_4 .ul_change_a2 span',
thumbNowClass:'on',//自定义导航对象当前class为on
changeTime:4000//自定义切换时间为4000ms
});
$('#change_5 .a_bigImg').soChange({
thumbObj:'#change_5 .ul_change_a2 span',
thumbNowClass:'on',//自定义导航对象当前class为on
changeTime:4000//自定义切换时间为4000ms
});
});
</script>
</head>
<body id="dhome">
<!--head-->
<header id="header">
<div class="headbox">
<div class="headleft fl">
<div class="headlhy">会员：[<a href="#">登陆</a> / <a href="#">注册</a>]</div>
<div class="headwzlogo clear"><a href="index.html"><img src="img/topwzlogo.png"></a></div>
</div>
<!--search-->
<div class="searchbox fr">
<div class="search">
<form action="" name="formsearch">
<input name="keyword" type="text" id="search-keyword" value="==请填入搜索的关键词==" class="searchinp fl" onFocus="if(value==defaultValue){value='';}" onBlur="if(!value){value=defaultValue;}">
<button type="submit" class="searchbut fl"></button>
</form>
</div>
</div>
<!--search end-->
</div>
<!--nav-->
<nav class="navbox clear">
<div class="navmain">
<div class="hlogo fl"><a href="index.html"><img src="img/logo.gif"></a></div>
<ul class="navlist fr">
<li id="m1"><a href="index.html">首页</a></li>
<li><a href="越野自驾游.html">越野自驾游</a></li>
<li><a href="越野车改装.html">越野车改装</a></li>
<li><a href="#">网上商城</a></li>
<li><a href="资讯中心.html">资讯中心</a></li>
<li><a href="论坛交流.html">论坛交流</a></li>
<li><a href="精美杂志.html">精美杂志</a></li>
<li><a href="#">会员服务</a></li>
<li><a href="加盟我们.html">加盟我们</a></li>
</ul>
</div>
</nav>
<!--nav end-->
</header>
<!--head end-->
<!--flash-->
<section class="flashnavbox">
<div class="main_visual">
<div class="flicking_con">
<div class="flicking_inner">
</div>
</div>
<div class="main_image">
<ul>
<li><a href="#"><span style="background:url('img/indextop.jpg') no-repeat center top"></span></a></li>
</ul>
<a href="javascript:;" id="btn_prev"></a>
<a href="javascript:;" id="btn_next"></a>
</div>
</div>
</section>
<!--flash end-->
<div id="mianboxbj">
<div class="blank35"></div>
<!--自驾游热门线路-->
<div class="dtitlebox dtitletp1"><img src="img/dtitle1.png" title="自驾游热门线路" alt="自驾游热门线路"></div>
<div class="blank20"></div>
<!--图片滚动-->
<!--<div class="infiniteCarousel">
<div class="wrapper">
<ul class="imgscroll dzjypic">
<li><a href="#"><img src="img/dzjytp1.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原1</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp2.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原2</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp3.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原3</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp4.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原4</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp1.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原5</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp2.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原6</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp3.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原7</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp4.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原8</a></h3>精彩视频--2015/9</div></li>
</ul>
</div>
</div>-->
<div id="web_color">
<div id="customer_box" class="src6">
<A class="st png" href="#"></A>
<A class="sm png" href="#"></A>
<div class="src7">
<ul>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp2.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp1.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp2.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png"><img src="img/dzjytp3.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp4.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp1.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
</ul>
</div>
</div>
</div>
<!--图片滚动 end-->
<div class="cbody">
<div class="blank30"></div>
<!--dlxhotbox-->
<div class="dlxhotbox dlxhot">
<ul class="masonry">
<li class="picyjl"><div class="photo"><img src="img/tp01.jpg" width="275" height="330"></div>
<div class="dlxtitle"><h3>寻路天下西北边疆行<br>Desert Tour</h3></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a><p>在Park Hyatt，我们允诺为您的身心、感官开启定制式的旅程。针对每一位顾客的爱好和生活方式提供个性化服务爱好和生活方式。</p>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp02.jpg" width="275" height="330"></div>
<div class="dlxtitle"><h3>寻路天下西北边疆行<br>Desert Tour</h3></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a><p>在Park Hyatt，我们允诺为您的身心、感官开启定制式的旅程。针对每一位顾客的爱好和生活方式提供个性化服务爱好和生活方式。</p>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp03.jpg" width="275" height="330"></div>
<div class="dlxtitle"><h3>寻路天下西北边疆行<br>Desert Tour</h3></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a><p>在Park Hyatt，我们允诺为您的身心、感官开启定制式的旅程。针对每一位顾客的爱好和生活方式提供个性化服务爱好和生活方式。</p>
<a href="#" class="readmore">Read more</a>
</div></li>
<li class="picyjr"><div class="photo"><img src="img/tp04.jpg" width="275" height="330"></div>
<div class="dlxtitle"><h3>寻路天下西北边疆行<br>Desert Tour</h3></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a><p>在Park Hyatt，我们允诺为您的身心、感官开启定制式的旅程。针对每一位顾客的爱好和生活方式提供个性化服务爱好和生活方式。</p>
<a href="#" class="readmore">Read more</a>
</div></li>
</ul>
</div>
<!--dlxhotbox end-->
<!--自驾游热门线路 end-->
<div class="blank40"></div>
<!--自驾游经典线路-->
<div class="dtitlebox dtitletp2"><img src="img/dtitle2.png" title="自驾游经典线路" alt="自驾游经典线路"></div>
<div class="blank20"></div>
<!--dlxhotbox-->
<div class="dlxhotbox dlxhot">
<ul class="masonry">
<li class="picyjl"><div class="photo"><img src="img/tp01.jpg" width="275" height="212"></div>
<div class="rsp hssybj1"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp02.jpg" width="275" height="212"></div>
<div class="rsp hssybj1"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp03.jpg" width="275" height="212"></div>
<div class="rsp hssybj1"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li class="picyjr"><div class="photo"><img src="img/tp04.jpg" width="275" height="212"></div>
<div class="rsp hssybj1"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
</ul>
</div>
<!--dlxhotbox end-->
</div>
<div class="blank30"></div>
<!--图片滚动-->
<!--<div class="infiniteCarousel">
<div class="wrapper">
<ul class="imgscroll dzjypic">
<li><a href="#"><img src="img/dzjytp1.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp2.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp3.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原</a></h3>精彩视频--2015/9</div></li>
<li><a href="#"><img src="img/dzjytp4.png" width="113" height="95"></a>
<div class="zjylxr"><h3><a href="#">内蒙古草原</a></h3>精彩视频--2015/9</div></li>
</ul>
</div>
</div>-->
<div id="web_color">
<div id="customer_box" class="src6">
<A class="st png" href="#"></A>
<A class="sm png" href="#"></A>
<div class="src7">
<ul>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp2.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp1.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp2.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png"><img src="img/dzjytp3.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp4.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp1.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp2.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp3.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png"><img src="img/dzjytp3.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp4.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp1.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp2.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
<li class="png"><a href="#" class="png" ><img src="img/dzjytp3.png" /></a>
<div class="zjylxr"><h3><a href="/Item/807.aspx">白石山</a></h3>玻璃栈道--全年</div>
</li>
</ul>
</div>
</div>
</div>
<!--图片滚动 end-->
<!--自驾游经典线路 end-->
<div class="cbody">
<div class="blank40"></div>
<div class="bannerbox">
<!-- 3 -->
<div class="eachBox">
<div class="changeBox_a1" id="change_3">
<a href="" class="a_bigImg"><img src="img/tp03.jpg" width="1098" height="158" alt="" /></a>
<a href="" class="a_bigImg"><img src="img/tp07.jpg" width="1098" height="158" alt="" /></a>
<a href="" class="a_bigImg"><img src="img/tp08.jpg" width="1098" height="158" alt="" /></a>
<ul class="ul_change_a2">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
</ul>
</div>
</div>
</div>
<div class="blank40"></div>
<!--越野车改装-->
<div class="dtitlebox dtitletp3"><img src="img/dtitle3.png" title="越野车改装" alt="越野车改装"></div>
<div class="blank10"></div>
<div class="dgzbox">
<div class="dgztitle"><span class="tab_2" id="dyycgz_t_1" onMouseOver="Tb(1, 5, 'dyycgz', 'tab');"><a href="#">丰田越野改装</a></span><span class="tab_1" id="dyycgz_t_2" onMouseOver="Tb(2, 5, 'dyycgz', 'tab');"><a href="#">牧马人改装</a></span><span class="tab_1" id="dyycgz_t_3" onMouseOver="Tb(3, 5, 'dyycgz', 'tab');"><a href="#">北汽改装</a></span><span class="tab_1" id="dyycgz_t_4" onMouseOver="Tb(4, 5, 'dyycgz', 'tab');"><a href="#">路虎改装</a></span><span class="tab_1" id="dyycgz_t_5" onMouseOver="Tb(5, 5, 'dyycgz', 'tab');"><a href="#">奔驰改装</a></span><span><a href="#">更多</a></span></div>
<div class="blank30"></div>
<!--tab1-->
<div id="dyycgz_c_1">
<div class="dgzpic">
<div class="dgzpicul1 fl">
<ul>
<li><div class="photo"><img src="img/tp03.jpg" width="354" height="343"></div>
<!--<div class="dgzth3"><h3>原装车</h3></div>-->
<div class="dgzbj"></div>
<div class="dgztext"><a href="#"><h3>再认真也成不了风格！</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div></li>
<li><a href="#"><img src="img/tp07.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh1"></div>
<div class="dgztext dgztext1"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
<li><a href="#"><img src="img/tp08.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh1"></div>
<div class="dgztext dgztext1"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
</div>
<div class="dgzpicul1 fl">
<ul>
<li><div class="photo"><img src="img/tp10.jpg" width="354" height="343"></div>
<!--<div class="dgzth3"><h3>原装车</h3></div>-->
<div class="dgzbj"></div>
<div class="dgztext"><a href="#"><h3>再认真也成不了风格！</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div></li>
<li>
<script type="text/javascript">
<!--
var focus_width=354;
var focus_height=159;
var text_height=0;
var swf_height = focus_height+text_height;
var pics='';
var links='';
var texts='';
pics=pics+'img/tp09.jpg|img/tp08.jpg|img/tp07.jpg|img/tp06.jpg|';
links=links+'#|#|#|#|';
links=links.substring(0,links.length-1);
texts=texts.substring(0,texts.length-1);
pics=pics.substring(0,pics.length-1);
document.write('<center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="img/pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#DADADA">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed src="img/pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#DADADA" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object></center>');
//-->
</script>
</li>
</ul>
</div>
<div class="dgzpicul2 fr">
<ul>
<li><a href="#"><img src="img/tp04.jpg" width="354" height="167"></a>
<div class="dgzbj dgzbjwh2"></div>
<div class="dgztext dgztext2"><a href="#"><h3>再认真也成不了风格</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
<div class="dgzpicul3 fl">
<ul>
<li><a href="#"><img src="img/tp04.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh3"></div>
<div class="dgztext dgztext3"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
<li class=" clear"><a href="#"><img src="img/tp11.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh4"></div>
<div class="dgztext dgztext3"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
</div>
<div class="dgzpicul4 fr">
<ul>
<li><a href="#"><img src="img/tp06.jpg" width="170" height="334"></a>
<div class="dgzbj dgzbjwh5"></div>
<div class="dgztext dgztext5"><a href="#"><h3>原装车</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--tab2-->
<div id="dyycgz_c_2" style="display: none;">
<div class="dgzpic">
<div class="dgzpicul1 fl">
<ul>
<li><div class="photo"><img src="img/tp08.jpg" width="354" height="343"></div>
<!--<div class="dgzth3"><h3>原装车</h3></div>-->
<div class="dgzbj"></div>
<div class="dgztext"><a href="#"><h3>再认真也成不了风格！</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div></li>
<li><a href="#"><img src="img/tp07.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh1"></div>
<div class="dgztext dgztext1"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
<li><a href="#"><img src="img/tp03.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh1"></div>
<div class="dgztext dgztext1"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
</div>
<div class="dgzpicul1 fl">
<ul>
<li><div class="photo"><img src="img/tp11.jpg" width="354" height="343"></div>
<!--<div class="dgzth3"><h3>原装车</h3></div>-->
<div class="dgzbj"></div>
<div class="dgztext"><a href="#"><h3>再认真也成不了风格！</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div></li>
<li>
<script type="text/javascript">
<!--
var focus_width=354;
var focus_height=159;
var text_height=0;
var swf_height = focus_height+text_height;
var pics='';
var links='';
var texts='';
pics=pics+'img/tp09.jpg|img/tp08.jpg|img/tp07.jpg|img/tp06.jpg|';
links=links+'#|#|#|#|';
links=links.substring(0,links.length-1);
texts=texts.substring(0,texts.length-1);
pics=pics.substring(0,pics.length-1);
document.write('<center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="img/pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#DADADA">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed src="img/pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#DADADA" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object></center>');
//-->
</script>
</li>
</ul>
</div>
<div class="dgzpicul2 fr">
<ul>
<li><a href="#"><img src="img/tp04.jpg" width="354" height="167"></a>
<div class="dgzbj dgzbjwh2"></div>
<div class="dgztext dgztext2"><a href="#"><h3>再认真也成不了风格</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
<div class="dgzpicul3 fl">
<ul>
<li><a href="#"><img src="img/tp04.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh3"></div>
<div class="dgztext dgztext3"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
<li class=" clear"><a href="#"><img src="img/tp12.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh4"></div>
<div class="dgztext dgztext3"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
</div>
<div class="dgzpicul4 fr">
<ul>
<li><a href="#"><img src="img/tp06.jpg" width="170" height="334"></a>
<div class="dgzbj dgzbjwh5"></div>
<div class="dgztext dgztext5"><a href="#"><h3>原装车</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--tab3-->
<div id="dyycgz_c_3" style="display: none;">
<div class="dgzpic">
<div class="dgzpicul1 fl">
<ul>
<li><div class="photo"><img src="img/tp03.jpg" width="354" height="343"></div>
<!--<div class="dgzth3"><h3>原装车</h3></div>-->
<div class="dgzbj"></div>
<div class="dgztext"><a href="#"><h3>再认真也成不了风格！</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div></li>
<li><a href="#"><img src="img/tp07.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh1"></div>
<div class="dgztext dgztext1"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
<li><a href="#"><img src="img/tp08.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh1"></div>
<div class="dgztext dgztext1"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
</div>
<div class="dgzpicul1 fl">
<ul>
<li><div class="photo"><img src="img/tp10.jpg" width="354" height="343"></div>
<!--<div class="dgzth3"><h3>原装车</h3></div>-->
<div class="dgzbj"></div>
<div class="dgztext"><a href="#"><h3>再认真也成不了风格！</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div></li>
<li>
<script type="text/javascript">
<!--
var focus_width=354;
var focus_height=159;
var text_height=0;
var swf_height = focus_height+text_height;
var pics='';
var links='';
var texts='';
pics=pics+'img/tp09.jpg|img/tp08.jpg|img/tp07.jpg|img/tp06.jpg|';
links=links+'#|#|#|#|';
links=links.substring(0,links.length-1);
texts=texts.substring(0,texts.length-1);
pics=pics.substring(0,pics.length-1);
document.write('<center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="img/pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#DADADA">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed src="img/pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#DADADA" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object></center>');
//-->
</script>
</li>
</ul>
</div>
<div class="dgzpicul2 fr">
<ul>
<li><a href="#"><img src="img/tp04.jpg" width="354" height="167"></a>
<div class="dgzbj dgzbjwh2"></div>
<div class="dgztext dgztext2"><a href="#"><h3>再认真也成不了风格</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
<div class="dgzpicul3 fl">
<ul>
<li><a href="#"><img src="img/tp04.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh3"></div>
<div class="dgztext dgztext3"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
<li class=" clear"><a href="#"><img src="img/tp11.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh4"></div>
<div class="dgztext dgztext3"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
</div>
<div class="dgzpicul4 fr">
<ul>
<li><a href="#"><img src="img/tp06.jpg" width="170" height="334"></a>
<div class="dgzbj dgzbjwh5"></div>
<div class="dgztext dgztext5"><a href="#"><h3>原装车</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--tab4-->
<div id="dyycgz_c_4" style="display: none;">
<div class="dgzpic">
<div class="dgzpicul1 fl">
<ul>
<li><div class="photo"><img src="img/tp08.jpg" width="354" height="343"></div>
<!--<div class="dgzth3"><h3>原装车</h3></div>-->
<div class="dgzbj"></div>
<div class="dgztext"><a href="#"><h3>再认真也成不了风格！</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div></li>
<li><a href="#"><img src="img/tp07.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh1"></div>
<div class="dgztext dgztext1"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
<li><a href="#"><img src="img/tp03.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh1"></div>
<div class="dgztext dgztext1"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
</div>
<div class="dgzpicul1 fl">
<ul>
<li><div class="photo"><img src="img/tp11.jpg" width="354" height="343"></div>
<!--<div class="dgzth3"><h3>原装车</h3></div>-->
<div class="dgzbj"></div>
<div class="dgztext"><a href="#"><h3>再认真也成不了风格！</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div></li>
<li>
<script type="text/javascript">
<!--
var focus_width=354;
var focus_height=159;
var text_height=0;
var swf_height = focus_height+text_height;
var pics='';
var links='';
var texts='';
pics=pics+'img/tp09.jpg|img/tp08.jpg|img/tp07.jpg|img/tp06.jpg|';
links=links+'#|#|#|#|';
links=links.substring(0,links.length-1);
texts=texts.substring(0,texts.length-1);
pics=pics.substring(0,pics.length-1);
document.write('<center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="img/pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#DADADA">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed src="img/pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#DADADA" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object></center>');
//-->
</script>
</li>
</ul>
</div>
<div class="dgzpicul2 fr">
<ul>
<li><a href="#"><img src="img/tp04.jpg" width="354" height="167"></a>
<div class="dgzbj dgzbjwh2"></div>
<div class="dgztext dgztext2"><a href="#"><h3>再认真也成不了风格</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
<div class="dgzpicul3 fl">
<ul>
<li><a href="#"><img src="img/tp04.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh3"></div>
<div class="dgztext dgztext3"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
<li class=" clear"><a href="#"><img src="img/tp12.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh4"></div>
<div class="dgztext dgztext3"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
</div>
<div class="dgzpicul4 fr">
<ul>
<li><a href="#"><img src="img/tp06.jpg" width="170" height="334"></a>
<div class="dgzbj dgzbjwh5"></div>
<div class="dgztext dgztext5"><a href="#"><h3>原装车</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--tab5-->
<div id="dyycgz_c_5" style="display: none;">
<div class="dgzpic">
<div class="dgzpicul1 fl">
<ul>
<li><div class="photo"><img src="img/tp03.jpg" width="354" height="343"></div>
<!--<div class="dgzth3"><h3>原装车</h3></div>-->
<div class="dgzbj"></div>
<div class="dgztext"><a href="#"><h3>再认真也成不了风格！</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div></li>
<li><a href="#"><img src="img/tp07.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh1"></div>
<div class="dgztext dgztext1"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
<li><a href="#"><img src="img/tp08.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh1"></div>
<div class="dgztext dgztext1"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
</div>
<div class="dgzpicul1 fl">
<ul>
<li><div class="photo"><img src="img/tp10.jpg" width="354" height="343"></div>
<!--<div class="dgzth3"><h3>原装车</h3></div>-->
<div class="dgzbj"></div>
<div class="dgztext"><a href="#"><h3>再认真也成不了风格！</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div></li>
<li>
<script type="text/javascript">
<!--
var focus_width=354;
var focus_height=159;
var text_height=0;
var swf_height = focus_height+text_height;
var pics='';
var links='';
var texts='';
pics=pics+'img/tp09.jpg|img/tp08.jpg|img/tp07.jpg|img/tp06.jpg|';
links=links+'#|#|#|#|';
links=links.substring(0,links.length-1);
texts=texts.substring(0,texts.length-1);
pics=pics.substring(0,pics.length-1);
document.write('<center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="img/pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#DADADA">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed src="img/pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#DADADA" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object></center>');
//-->
</script>
</li>
</ul>
</div>
<div class="dgzpicul2 fr">
<ul>
<li><a href="#"><img src="img/tp04.jpg" width="354" height="167"></a>
<div class="dgzbj dgzbjwh2"></div>
<div class="dgztext dgztext2"><a href="#"><h3>再认真也成不了风格</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
<div class="dgzpicul3 fl">
<ul>
<li><a href="#"><img src="img/tp04.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh3"></div>
<div class="dgztext dgztext3"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
<li class=" clear"><a href="#"><img src="img/tp11.jpg" width="166" height="159"></a>
<div class="dgzbj dgzbjwh4"></div>
<div class="dgztext dgztext3"><a href="#"><h3>大众都走的路</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
</div>
<div class="dgzpicul4 fr">
<ul>
<li><a href="#"><img src="img/tp06.jpg" width="170" height="334"></a>
<div class="dgzbj dgzbjwh5"></div>
<div class="dgztext dgztext5"><a href="#"><h3>原装车</h3></a>
<!--<p>大众都走的路，再认真也成不了风格！</p>-->
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--tab5 end-->
<div class="blank40"></div>
<div class="dgztitle dgztitle1"><span class="tab_2" id="dpjgz_t_1" onMouseOver="Tb(1, 4, 'dpjgz', 'tab');"><a href="#">改装配件</a></span><span class="tab_1" id="dpjgz_t_2" onMouseOver="Tb(2, 4, 'dpjgz', 'tab');"><a href="#">维护保养</a></span><span class="tab_1" id="dpjgz_t_3" onMouseOver="Tb(3, 4, 'dpjgz', 'tab');"><a href="#">改装服务</a></span><span class="tab_1" id="dpjgz_t_4" onMouseOver="Tb(4, 4, 'dpjgz', 'tab');"><a href="#">改装技师</a></span><span><a href="#">更多</a></span></div>
<div class="blank30"></div>
<!--tab1-->
<div id="dpjgz_c_1">
<div class="dlxhotbox dgzhot">
<ul class="masonry">
<li><div class="photo"><img src="img/tp10.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp11.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp12.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp13.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
</ul>
</div>
</div>
<!--tab2-->
<div id="dpjgz_c_2" style="display: none;">
<div class="dlxhotbox dgzhot">
<ul class="masonry">
<li><div class="photo"><img src="img/tp11.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp13.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp10.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp12.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
</ul>
</div>
</div>
<!--tab3-->
<div id="dpjgz_c_3" style="display: none;">
<div class="dlxhotbox dgzhot">
<ul class="masonry">
<li><div class="photo"><img src="img/tp11.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp12.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp13.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp10.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
</ul>
</div>
</div>
<!--tab4-->
<div id="dpjgz_c_4" style="display: none;">
<div class="dlxhotbox dgzhot">
<ul class="masonry">
<li><div class="photo"><img src="img/tp13.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp12.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp07.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
<li><div class="photo"><img src="img/tp08.jpg" width="253" height="253"></div>
<div class="rsp hssybj"></div>
<div class="text hstext"><a href="#"><h3>寻路天下西北边疆行<br>Desert Tour</h3></a>
<a href="#" class="readmore">Read more</a>
</div></li>
</ul>
</div>
</div>
<!--tab4 end-->
</div>
<!--越野车改装 end-->
<div class="blank40"></div>
<!--网上商城-->
<div class="dtitlebox dtitletp4"><img src="img/dtitle4.png" title="网上商城" alt="网上商城"></div>
<div class="blank20"></div>
<div class="dlxhotbox dwsscpic">
<ul class="masonry">
<li><div class="photo"><img src="img/tp11.jpg" width="253" height="253"></div>
<div class="dlxtitle"><h3>改装配件</h3></div>
<div class="rsp hssybj"></div>
<div class="text gztext">
<h3><a href="#">改装配件</a></h3>
<img src="img/2wm1.jpg" width="101" height="103">
<p>扫一扫，进入微商城</p>
<div class="dscszsz"><a href="#" class="danjrsc fl">进入商城</a> <a href="#" class="dansz fl" title="设置"></a> <a href="#" class="dansc fl" title="收藏"></a></div>
</div></li>
<li><div class="photo"><img src="img/tp10.jpg" width="253" height="253"></div>
<div class="dlxtitle"><h3>户外服装</h3></div>
<div class="rsp hssybj"></div>
<div class="text gztext">
<h3><a href="#">户外服装</a></h3>
<img src="img/2wm1.jpg" width="101" height="103">
<p>扫一扫，进入微商城</p>
<div class="dscszsz"><a href="#" class="danjrsc fl">进入商城</a> <a href="#" class="dansz fl" title="设置"></a> <a href="#" class="dansc fl" title="收藏"></a></div>
</div></li>
<li><div class="photo"><img src="img/tp13.jpg" width="253" height="253"></div>
<div class="dlxtitle"><h3>户外装备</h3></div>
<div class="rsp hssybj"></div>
<div class="text gztext">
<h3><a href="#">户外装备</a></h3>
<img src="img/2wm1.jpg" width="101" height="103">
<p>扫一扫，进入微商城</p>
<div class="dscszsz"><a href="#" class="danjrsc fl">进入商城</a> <a href="#" class="dansz fl" title="设置"></a> <a href="#" class="dansc fl" title="收藏"></a></div>
</div></li>
<li><div class="photo"><img src="img/tp12.jpg" width="253" height="253"></div>
<div class="dlxtitle"><h3>户外饰品</h3></div>
<div class="rsp hssybj"></div>
<div class="text gztext">
<h3><a href="#">户外饰品</a></h3>
<img src="img/2wm1.jpg" width="101" height="103">
<p>扫一扫，进入微商城</p>
<div class="dscszsz"><a href="#" class="danjrsc fl">进入商城</a> <a href="#" class="dansz fl" title="设置"></a> <a href="#" class="dansc fl" title="收藏"></a></div>
</div></li>
</ul>
</div>
<!--网上商城 end-->
<div class="blank40"></div>
<div class="bannerbox">
<script type="text/javascript">
<!--
var focus_width=1100;
var focus_height=160;
var text_height=0;
var swf_height = focus_height+text_height;
var pics='';
var links='';
var texts='';
pics=pics+'img/banner1.jpg|img/banner.jpg|img/tp16.jpg|img/ltrbanner.jpg|';
links=links+'#|#|#|#|';
links=links.substring(0,links.length-1);
texts=texts.substring(0,texts.length-1);
pics=pics.substring(0,pics.length-1);
document.write('<center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="img/pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#DADADA">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed src="img/pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#DADADA" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object></center>');
//-->
</script>
</div>
<div class="blank40"></div>
<!--资讯中心-->
<div class="dtitlebox dtitletp5"><img src="img/dtitle5.png" title="资讯中心" alt="资讯中心"></div>
<div class="blank10"></div>
<dl class="dnewsbox fl">
<dt class="dnewstitle">
<span class="tab_2" id="dnews_t_1" onMouseOver="Tb(1, 3, 'dnews', 'tab');"><a href="#">越野常识</a></span><span class="tab_1" id="dnews_t_2" onMouseOver="Tb(2, 3, 'dnews', 'tab');"><a href="#">自救常识</a></span><span class="tab_1" id="dnews_t_3" onMouseOver="Tb(3, 3, 'dnews', 'tab');"><a href="#">出行必备</a></span>
</dt>
<dd>
<!--tab1-->
<div id="dnews_c_1">
<ul class="dlist">
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
<li><span class="fr">2015-03-20</span><a href="#">足间得以顿悟成为都市人追求市人追</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这</a></li>
<li><span class="fr">2015-03-20</span><a href="#">间得以顿悟成为都市人市人追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就</a></li>
<li><span class="fr">2015-03-20</span><a href="#">间得以顿悟成为都市人追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
<li><span class="fr">2015-03-20</span><a href="#">足间得以顿悟成为都市市人追追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
</ul>
</div>
<!--tab2-->
<div id="dnews_c_2" style="display: none;">
<ul class="dlist">
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就</a></li>
<li><span class="fr">2015-03-20</span><a href="#">间得以顿悟成为都市人追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
<li><span class="fr">2015-03-20</span><a href="#">足间得以顿悟成为都市人追求市人追</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这</a></li>
<li><span class="fr">2015-03-20</span><a href="#">间得以顿悟成为都市人市人追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">足间得以顿悟成为都市市人追追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
</ul>
</div>
<!--tab3-->
<div id="dnews_c_3" style="display: none;">
<ul class="dlist">
<li><span class="fr">2015-03-20</span><a href="#">足间得以顿悟成为都市人追求市人追</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这</a></li>
<li><span class="fr">2015-03-20</span><a href="#">间得以顿悟成为都市人市人追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就</a></li>
<li><span class="fr">2015-03-20</span><a href="#">间得以顿悟成为都市人追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
<li><span class="fr">2015-03-20</span><a href="#">足间得以顿悟成为都市市人追追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
</ul>
</div>
</dd>
</dl>
<dl class="dnewsbox fr">
<dt class="dnewstitle">
<span class="tab_2" id="dnewsr_t_1" onMouseOver="Tb(1, 3, 'dnewsr', 'tab');"><a href="#">自驾资讯</a></span><span class="tab_1" id="dnewsr_t_2" onMouseOver="Tb(2, 3, 'dnewsr', 'tab');"><a href="#">越野资讯</a></span><span class="tab_1" id="dnewsr_t_3" onMouseOver="Tb(3, 3, 'dnewsr', 'tab');"><a href="#">行业资讯</a></span>
</dt>
<dd>
<!--tab1-->
<div id="dnewsr_c_1">
<ul class="dlist">
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
<li><span class="fr">2015-03-20</span><a href="#">足间得以顿悟成为都市人追求市人追</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这</a></li>
<li><span class="fr">2015-03-20</span><a href="#">间得以顿悟成为都市人市人追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就</a></li>
<li><span class="fr">2015-03-20</span><a href="#">间得以顿悟成为都市人追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
<li><span class="fr">2015-03-20</span><a href="#">足间得以顿悟成为都市市人追追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
</ul>
</div>
<!--tab2-->
<div id="dnewsr_c_2" style="display: none;">
<ul class="dlist">
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就</a></li>
<li><span class="fr">2015-03-20</span><a href="#">间得以顿悟成为都市人追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
<li><span class="fr">2015-03-20</span><a href="#">足间得以顿悟成为都市人追求市人追</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这</a></li>
<li><span class="fr">2015-03-20</span><a href="#">间得以顿悟成为都市人市人追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">足间得以顿悟成为都市市人追追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
</ul>
</div>
<!--tab3-->
<div id="dnewsr_c_3" style="display: none;">
<ul class="dlist">
<li><span class="fr">2015-03-20</span><a href="#">足间得以顿悟成为都市人追求市人追</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这</a></li>
<li><span class="fr">2015-03-20</span><a href="#">间得以顿悟成为都市人市人追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就</a></li>
<li><span class="fr">2015-03-20</span><a href="#">间得以顿悟成为都市人追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
<li><span class="fr">2015-03-20</span><a href="#">足间得以顿悟成为都市市人追追求</a></li>
<li><span class="fr">2015-03-20</span><a href="#">山路上颠簸狂野的生命人生真谛也许就在这驻</a></li>
</ul>
</div>
</dd>
</dl>
<!--资讯中心 end-->
<div class="blank20"></div>
<!--友情链接-->
<dl class="link">
<dt>友情链接<br><span>link</span></dt>
<dd>
<ul>
<a target="_blank" href="">牛商网</a>
<a target="_blank" href="">单仁网络培训</a>
<a target="_blank" href="">营销型网站建设</a>
<a target="_blank" href="">网站建设</a>
<a target="_blank" href="">网站托管</a>
<a target="_blank" href="">手机网站建设</a>
<a target="_blank" href="">翰墨联合</a>
<a target="_blank" href="">北京网站建设</a>
<a target="_blank" href="">网站托管</a>
<a target="_blank" href="">门户网站建设</a>
<a target="_blank" href="">建网站公司</a>
<a target="_blank" href="">网站建设</a>
<a target="_blank" href="">网站托管</a>
<a target="_blank" href="">单仁网络培训</a>
<a target="_blank" href="">营销型网站建设</a>
<a target="_blank" href="">网站建设</a>
<a target="_blank" href="">网站托管</a>
<a target="_blank" href="">建网站公司</a>
</ul>
</dd>
</dl>
<!--友情链接 end-->
<div class="blank35"></div>
</div>
<!--foottop-->
<div class="foottop">
<ul>
<li><a href="#" title="关注官方微博"><img src="img/flxtp1.png" width="275" height="83" alt="关注官方微博"></a></li>
<li><a href="#" title="关注官方微信"><img src="img/flxtp2.png" width="275" height="83" alt="关注官方微信"></a></li>
<li><a href="#" title="联系在线客服"><img src="img/flxtp3.png" width="275" height="83" alt="联系在线客服"></a></li>
<li><a href="#" title="电话：400-099-1110"><img src="img/flxtp4.png" width="275" height="83" alt="电话：400-099-1110"></a></li>
</ul>
</div>
<!--foottop end-->
</div>
<!--底部-->
<div class="footer">
<div class="footbox">
<dl class="flxwm fl">
<dt>联系我们</dt>
<dd>
<form id="frmInput_1" name="frmInput_1" method="post" enctype="multipart/form-data" action="">
<ul class="lylist">
<li><input id="yyname" name="yyname" type="text" class="intext" value="名称" onFocus="if(this.value=='名称'){this.value='';}" onBlur="if(this.value==''){this.value='名称';}" isvalidate="true" displayname="称呼" isrequire="true" minnum="2" maxnum="0" validatetype="None" regexp="" errormessage="">
</li>
<li><input id="yyemail" name="yyemail" type="text" class="intext" value="邮箱" onFocus="if(this.value=='邮箱'){this.value='';}" onBlur="if(this.value==''){this.value='邮箱';}" isvalidate="true" displayname="邮箱" isrequire="true" minnum="0" maxnum="0" validatetype="Email" regexp="" errormessage="">
</li>
<li><textarea class="cont" name="" cols="" rows="" onFocus="if(this.value=='内容'){this.value='';}" onBlur="if(this.value==''){this.value='内容';}">内容</textarea>
</li>
</ul>
<div class="clear"><input value="提交" type="button" class="antijiao"></div>
</form>
</dd>
</dl>
<div class="lianxi fl">
<p><a href="">企业介绍</a><span>|</span><a href="">版权申明</a><span>|</span><a href="">网站地图</a><span>|</span><a href="">联系我们</a></p>
<ul>
<li class="tel">电话：010-81280150 </li>
<li class="email">邮箱：youxiang@sohu.com</li>
<li class="emails">邮编：100102</li>
<li class="address">地址：北京市朝阳区金蝉西路1号酷车小镇B1-005</li>
<li class="banquan">版权所有：车行天下 京ICP备09008783号-2 技术支持：<a title="网林时代" href="http://www.awanglin.com/" target="_blank">网林时代</a>·<a title="网站建设" href="http://www.awanglin.net/" target="_blank">网站建设</a></li>
</ul>
</div>
<!--f2wmbox-->
<div class="f2wmbox fr"><img src="img/f2wm.gif" width="133" height="135">
<div class="blank20"></div>
<div class="bdsharebuttonbox fbdshare"><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>
</div>
<!--f2wmbox end-->
</div>
</div>
<!--底部 end-->
<SCRIPT src="js/jquery.tool01s.min.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/moumou.js" type="text/javascript"></SCRIPT>
</body>
</html>
......
2.CSS
代码如下（节选示例）：
html { -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;font-size: 100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,table,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,iframe {margin:0 auto;padding:0;}
body{background:#fff; line-height:24px;color:#666666; font-size:12px; font-family: "Microsoft YaHei"; -webkit-text-size-adjust:none; min-width:1000px;}
ul,li{ list-style:none;margin: 0; padding: 0;}
img{ border:0;}
samp{font-family: "Microsoft YaHei"; }
a{ text-decoration:none; color:#666666;}
a:hover{ text-decoration: underline; color:#996633;}
.fl{ float:left;}
.fr{ float:right;}
.clear{ clear:both;}
.blank10{ line-height:10px; height:10px; clear:both; overflow:hidden;}
.blank15{ line-height:15px; height:15px; clear:both; overflow:hidden;}
.blank20{ line-height:20px; height:20px; clear:both; overflow:hidden;}
.blank30{ line-height:30px; height:30px; clear:both; overflow:hidden;}
.blank35{ line-height:35px; height:35px; clear:both; overflow:hidden;}
.blank40{ line-height:40px; height:40px; clear:both; overflow:hidden;}
.blank50{ line-height:50px; height:50px; clear:both; overflow:hidden;}
.cbody{width:1100px; margin:0 auto; overflow:hidden;}
#header{ height:192px; width:100%; overflow:hidden; z-index:1000; position:absolute;}
.headbox{ width:1100px; margin:0 auto; overflow:hidden; z-index:1000;}
.headleft{width:50%; height:110px; overflow:hidden; display:inline; margin:6px 0 0 28px;}
.headlhy{background:url(../img/tophylist.png) no-repeat center left; padding-left:15px; line-height:26px; color:#fff;}
.headlhy a{ color:#fff;}
.headlhy a:hover{ color:#b79e74;}
.headwzlogo{ margin:30px 0 0 12px;}
/* 搜索 */
.searchbox{background:url(../img/searchbox.png) no-repeat center left; width:410px; height:69px; margin:20px 0 0 15px;}
.search{ padding:35px 0 0 133px;}
.search .searchinp{ width:229px; height:32px; border:0px; font-size:12px; line-height:32px; padding-left:10px; background:url(); color:#fff;}
.search .searchbut{ background:url(); width:37px; height:32px;border:0px;cursor:pointer;}
/*=============== navbox ===============*/
.navbox{ background:#ffffff; height:76px; overflow:hidden; }
.navmain{width:1100px; height:76px; margin:0 auto; overflow:hidden;}
.hlogo{ width:216px; height:76px; overflow:hidden; display:inline;}
.navlist{ width:850px; z-index:100;}
.navlist li{ float: left; display:inline;height:70px;line-height:70px; font-size:16px; }
.navlist li a{ color:#666666; display:block; margin:0 15px;}
.navlist li a:hover{text-decoration:none;color:#b79e75; border-bottom:4px #b79e75 solid;}
.navlist span a,#dhome .navlist #m1 a,.navlist #m1 a:hover{color:#b79e75; border-bottom:4px #b79e75 solid;}
#mianboxbj{background:url(../img/mainbj.jpg) repeat-y center top;}
/*****友情链接******/
.link {height: 75px;width: 1098px; border:1px solid #d5d2d2; margin:0 auto; overflow:hidden;}
.link dt { border-right:1px solid #d5d2d2;display: block;float: left;font-size: 24px;height: 68px; line-height:30px;padding-top: 7px;text-align: center;width: 136px; color:#737373;}
.link dt span{text-transform:uppercase;font-size: 30px;}
.link dd {float: left;line-height: 22px;padding:15px 10px;width: 940px;}
.link ul a{ font-size:14px; display:inline-block; padding:0 14px;color:#7b7b7b;}
.link ul a:hover{ color:#b79e74;}
/*底部联系方式*/
.foottop{width:100%;background:url(../img/flxbj.gif) repeat-x center top; height:83px;}
.foottop ul{width:1100px; height:83px; margin:0 auto; overflow:hidden;}
.foottop ul li{ float:left; display:inline; width:275px; overflow:hidden;}
/*****底部样式******/
.footer{ width:100%; height:376px; background:#1d1d1d url(../img/footerbj.jpg) no-repeat center top;}
.footbox{ width:1100px; margin:0 auto; overflow:hidden;}
.footbox .flxwm{ margin-top:45px; display:inline;width:360px; overflow:hidden;}
.footbox .flxwm dt{ color:#8e8e8e; font-size:24px; margin-bottom:10px;}
.lylist li{ float: left; display:inline; width:360px; margin-bottom:10px; }
.lylist li .intext{ width:347px; height:33px; border:1px solid #333333; background:url();color:#454546; padding:0 0 0 10px;}
.lylist li .cont{ width:347px; height:90px;border:1px solid #333333;background:url();color:#454546; padding:5px 0 0 10px;}
.lylist li .intext:hover,.lylist li .cont:hover{border:1px solid #e4c49e;}
.antijiao{ width:110px; height:30px; background:#333333; text-align:center; line-height:30px; color:#b79e74; border:0px; font-size:14px; cursor:pointer;}
.lianxi{ width:490px; padding: 77px 0 0 50px;color:#e4c49e; font-size:14px;display:inline;}
.lianxi p{ line-height:18px; padding-bottom:15px;}
.lianxi p span{ padding:0 22px;}
.lianxi a{color:#e4c49e;}
.lianxi a:hover{ color:#b79e74;}
.lianxi li{line-height:40px;}
.lianxi .tel{ background:url(../img/ftel.png) no-repeat center left; padding-left:50px;}
.lianxi .email{background:url(../img/femail.png) no-repeat center left;padding-left:50px; margin-left:0px;}
.lianxi .emails{background:url(../img/femails.png) no-repeat center left;padding-left:50px; margin-left:0px;}
.lianxi .address{background:url(../img/faddress.png) no-repeat center left;padding-left:50px;}
.lianxi .banquan{}
.f2wmbox{width:140px; padding: 115px 0 0 0px;color:#e4c49e;line-height:40px; font-size:14px;display:inline;}
.f2wmbox img{ display:block;}
.fbdshare{width:150px; line-height:30px;}
.f2wmbox .bdshare-button-style0-24 a{ margin:0 2px 0 0;}
/* page */
.pagebox{ background:#cccccc; height:34px; padding:5px; overflow:hidden;}
.page{position:relative;left:50%;line-height:32px; float:left;}
.page li{ float:left; position:relative;right:50%; white-space:nowrap; margin:0 3px; line-height:32px; padding:0 12px; font-size:12px; text-align:center; background:url(../img/pagebj.gif) repeat-x top; border:1px #c3c9cd solid;-moz-border-radius: 3px;-khtml-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px; font-size:14px;}
.page .thisclass{color:#fff; background:#b79e74; border:1px #ad9873 solid;}
.page .thisclass a{color:#fff;background:#b79e74;}
.page li:hover{color:#fff; background:#b79e74; border:1px #ad9873 solid;}
.page li:hover a{ color:#fff;}
.bannerbox img{ display:block;}
.gztbanner img{ display:block; border:1px #333333 solid;}
.gztbanner a:hover img,.lbanner a:hover img{border:1px #996633 solid;}
.lbanner img{ display:block; border:1px #c0a183 solid;}
.eachBox{overflow:hidden;clear:both;}
/* changeBox_a1 */
.changeBox_a1{float:left;width:1100px;height:160px; padding:2px;position:relative; }
.changeBox_a2{float:left;width:354px;height:159px; padding:2px;position:relative; }
.changeBox_a1 .a_bigImg{position:absolute;top:2px;left:2px;display:none;}
/* ul_change_a2 */
.ul_change_a2{position:absolute;right:5px; bottom:7px;padding-left:19px;overflow:hidden;}
.ul_change_a2 li{display: -moz-inline-stack;display:inline-block;*display:inline;*zoom:1;}
.ul_change_a2 span{display: -moz-inline-stack;display:inline-block;*display:inline;*zoom:1;font-size:0.8em;padding:0px 3px; margin-right:2px;
border:1px solid #999;background:#fff;filter:alpha(opacity=85);opacity:0.85;cursor:hand;cursor:pointer; line-height:14px;}
.ul_change_a2 span.on{border:1px solid #CC0000;background:#FFFF9D;color:#CC0000;}
......
3.JS
代码如下（节选示例）：
j(document).ready(function () {
if (!j.cookie("DepartureCity")) {
depart_show();
}
//search();
j('#banner_pic a').hhSlide({ thumbObj: '#banner_chose a' });
j("#dest_list").hhScroll({ listChildObj: j("#dest_list a"), preObj: j("#dest_pre"), nextObj: j("#dest_next") });
j("#inte_list").hhScroll({ listChildObj: j("#inte_list a"), preObj: j("#inte_pre"), nextObj: j("#inte_next")});
});
function search() {
j(".pop_search").hide();
j(".banner_box .search input").focus(function () {
j(".pop_search").show();
});
j(".banner_box .search input").blur(function () {
j(".pop_search").hide();
});
j("#banner_box .search input").blur(function () {
j(".pop_search").hide();
});
}
(function ($) {
$.fn.extend({
hhSlide: function (o) {
o = $.extend({
thumbObj: null, //导航对象
botPrev: null, //按钮上一个
botNext: null, //按钮下一个
changeType: 'fade', //切换方式，可选：fade,slide
thumbCurClass: 'current', //导航对象当前的class
thumbOverEvent: true, //鼠标经过thumbObj时是否切换对象，默认为true，为false时，只有鼠标点击thumbObj才切换对象
slideTime: 1000, //平滑过渡时间，默认为1000ms，为0或负值时，忽略changeType方式，切换效果为直接显示隐藏
autoChange: true, //是否自动切换
clickFalse: true, //导航对象如果有链接，点击是否链接无效，即是否返回return false，默认是return false链接无效，当thumbOverEvent为false时，此项必须为true，否则鼠标点击事件冲突
overStop: true, //鼠标经过切换对象时，切换对象是否停止切换，并于鼠标离开后重启自动切换，前提是已开启自动切换
changeTime: 5000, //自动切换时间
delayTime: 300//鼠标经过时对象切换迟滞时间，推荐值为300ms
}, o || {});
var _self = $(this);
var thumbObj;
var size = _self.size();
var nowIndex = 0;
var index;
var startRun;
var delayRun;
var slideFinish = true;
_init();
_start();
//初始化
function _init() {
_self.hide().eq(0).show();
//导航对象
if (o.thumbObj != null) {
//初始化thumbObj
thumbObj = $(o.thumbObj);
thumbObj.removeClass(o.thumbCurClass).eq(0).addClass(o.thumbCurClass);
//导航对象click事件
thumbObj.click(function () {
index = thumbObj.index($(this));
_run();
if (o.clickFalse == true) {
return false;
}
});
//导航对象hover事件
if (o.thumbOverEvent == true) {
thumbObj.mouseenter(function () {
clearInterval(startRun);
clearTimeout(delayRun);
index = thumbObj.index($(this));
delayRun = setTimeout(function () { _run(); clearInterval(startRun); }, slideFinish ? o.delayTime : o.slideTime);
});
thumbObj.mouseleave(function () {
clearTimeout(delayRun);
if (o.autoChange == true) {
delayRun = setTimeout(_next, o.changeTime);
}
});
}
}
//点击 按钮上一个
if (o.botPrev != null) {
$(o.botPrev).click(function () {
if (_self.queue().length < 1) {//防止短时间连续点击
index = (nowIndex + size - 1) % size;
_run();
}
return false;
});
}
//点击 按钮下一个
if (o.botNext != null) {
$(o.botNext).click(function () {
if (_self.queue().length < 1) {
_next();
}
return false;
});
}
}
function _start() {
//自动运行
......
五 、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-优快云博客。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
