目录
一、前言
本实例以鲜花为主题设计，应用html+css+js，包括DIV布局、图片轮翻效果、菜单导航、二级三级菜单、留言板、搜索等，供大家参考。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
1.HTML
代码如下（节选示例）：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/web.js" type="text/javascript"></script>
</head>
<body>
<div class="header">
<div class="logo"><a href=""><img src="picture/logo.jpg"></a></div>
<div class="nav">
<ul>
<li><em><span>首页</span><a href="index.html">HOME</a></em></li>
<li class="cur"><em><span>关于我们</span><a href="about.html">ABOUT</a></em></li>
<li><em><span>永生花</span><a href="flowers-ysh.html">LIVING</a></em>
<ul>
<li><a href="">大地农园</a></li>
<li><a href="">厄瓜多尔</a></li>
<li><a href="">苔藓</a></li>
<li><a href="">荷兰进口棉花</a></li>
</ul>
</li>
<li><em><span>鲜花</span><a href="flowers.html">FLOWERS</a></em>
<ul>
<li><a href="">玫瑰</a></li>
<li><a href="">多肉植物</a></li>
<li><a href="">绣球花</a></li>
<li><a href="">薰衣草</a></li>
<li><a href="">太阳花</a></li>
</ul>
</ul>
<div class="clear"></div>
</div>
<div class="header_r">
<div class="search_form fr">
<form>
<input type="text" class="search_text" placeholder="产品搜索">
<input type="button" class="search_btn" value="">
</form>
</div>
</div>
<div class="clear"></div>
</div>
<div class="pages_banner h320" style="background:url(images/banner_pages.jpg) no-repeat center top">
<div class="posi">
<h2>关于我们</h2>
<p><a href="">首页</a> / <a href="" class="cur">关于我们</a></p>
</div>
</div>
<div class="about_box wrap">
<div class="about_tit">关于我们</div>
<div class="about_mk">
<div class="info">
<p>上海xxx经过多年的发展与沉淀，"xxx"成为国内知名的精品花卉领导品牌，并得到国际市场的认可。xxx秉承"精诚合作，共生共赢"的理念，为客户提供优质的产品和差异化的服务。
xxx国际化的培植标准和管理模式降低了生产成本，在永生花和鲜花等领域形成了从花卉培植到市场直销的先天优势，确保了花卉产品优异的品质，并得到市场的高度认可，成为国内永生花优质品牌专业供应商。</p>
<p> </p>
<p>xxx的鲜花培育基地位于气候得天独厚的昆明，快速高效的生产供货渠道和完善的售后服务体系使xxx能及时满足客户的多样化需求，与广大客户建立了稳固共赢的合作关系。
目前，xxx永生花品牌以上海为中心，辐射大陆各级城市，在国内市场占有率达到80%。</p>
<p> </p>
<p>道生一，一生二，三生万物。土生木，木生花，花生情怀。花，使生活更美好。我们以创造更美的生活为愿景，运用国际先进的生产技术及科学管理经验，为客户创造更高的价值。 </p>
</div>
</div>
<p align="center"><img src="picture/aboutimg.jpg"></p>
<div class="about_mk">
<div class="tit">企业文化</div>
<div class="info">
<p>xxx国际化的培植标准和管理模式降低了生产成本，在永生花和鲜花等领域形成了从花卉培植到市场直销的先天优势，确保了花卉产品优异的品质，并得到市场的高度认可，成为国内永生花优质品牌专业供应商。</p>
<p>xxx的鲜花培育基地位于气候得天独厚的昆明，快速高效的生产供货渠道和完善的售后服务体系使xxx能及时满足客户的多样化需求，与广大客户建立了稳固共赢的合作关系。
目前，xxx永生花品牌以上海为中心，辐射大陆各级城市，在国内市场占有率达到80%。</p>
</div>
</div>
<div class="about_mk">
<div class="tit">合作伙伴</div>
</div>
<p><img src="picture/aboutimg1.jpg"> <img src="picture/aboutimg2.jpg"> <img src="picture/aboutimg3.jpg"></p>
</div>
<div class="footer">
<div class="wrap fot_info">
<div class="fot_links fl">
<dl>
<dt>关于我们</dt>
<dd><a href="">关于我们</a></dd>
<dd><a href="">企业文化</a></dd>
<dd><a href="">合作伙伴</a></dd>
</dl>
<dl>
<dt>服务中心</dt>
<dd><a href="">订购指南</a></dd>
<dd><a href="">常见问题</a></dd>
<dd><a href="">售后服务</a></dd>
</dl>
<dl>
<dt>人才发展</dt>
<dd><a href="">人才政策</a></dd>
<dd><a href="">工作机会</a></dd>
</dl>
<div class="clear"></div>
</div>
<div class="fot_contact fr">
<p class="font01">Contact US</p>
<p>Tel:(021)678XX638</p>
<p>E-mail:[email protected]</p>
<p>地址：上海省徐家汇XXXXXXXXX89-号7号办公楼</p>
<div class="fot_search">
<form>
<input type="text" class="search_text">
<input type="button" class="search_btn" value="提交">
</form>
</div>
</div>
<div class="clear"></div>
</div>
<div class="fot_bottom">
<div class="box">
<p class="fr">COPYRXXX© 2084 MORE 备沪7636XXXI</p>
<div class="icons">
<ul>
<li><a href="" class="icon01"></a></li>
<li><a href="" class="icon02"></a>
<div class="ico_box"><img src="picture/wx.png"><span class="cur"></span></div>
</li>
<li><a href="" class="icon03"></a></li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="youce">
<ul>
<li><a title="返回顶部" class="yc1" href="javascript:void(0)" id="gotop" style="display: block;"></a><!--置顶--></li>
<li><a class="yc2" href="javascript:window.external.AddFavorite(location.href,document.title);"></a><!--加入收藏--></li>
<li> <a title="淘宝店铺" class="yc3" href="#">
<div class="wx_box">
<div class="yc_weixin"><span>淘宝店铺</span> </div>
</div>
</a><!--淘宝店铺-->
</li>
<li> <a title="阿里巴巴店铺" class="yc4" href="#">
<div class="wx_box">
<div class="yc_weixin"><span>阿里巴巴店铺</span> </div>
</div>
</a><!--阿里巴巴店铺-->
</li>
<li> <a title="客服" class="yc5" href="#">
<div class="wx_box">
<div class="yc_weixin"><span>客服</span> </div>
</div>
</a><!--阿里巴巴店铺-->
</li>
</ul>
</div>
</body>
</html>
......
2.CSS
代码如下（节选示例）：
pre{white-space: normal;}
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,form,p{margin:0px;padding:0px;}
body{font-size:12px;font-family:'微软雅黑';color: #010101;line-height:23px;background:#f0f0f0;background-size:100%;}
img{border:0;}
ul,li{list-style:none;list-style-type: none}
h1, h2, h3, h4, h5, h6 { font-size: 100% } /* 字体加粗与否，视页面标题更改 */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{ font-weight:bold;} /* 字体加粗与否，视页面标题更改 */
i,b{ font-size:12px; font-weight:normal;font-style: normal;}
input,button, textarea, select{ vertical-align: middle;}
input{ height:18px; color:#000000; line-height:18px;}
select{ height:23px; color:#000000; line-height:23px;}
button { cursor: pointer }
em, cite { font-style: normal; }
a{color:#010101;text-decoration:none;}
a:hover{color: #da0e78;text-decoration: none; list-style:none;}
.txtlf{ text-align:left;}
.txtrg{ text-align:right;}
.fl{ float:left;}
.fr{ float:right;}
.fix:after {content:'.';display:block;clear:both;visibility:hidden;height:0px;}/*清除浮动的一种方法，将此class名写在内部有浮动的标签中，便可清除子字元素的浮动，使用非常方便*/
.fix {zoom:1;}
.clearfixed:after { content: "."; clear: both; display: block; height: 0; overflow: hidden }
.clearfixed { zoom: 1 } /* 增加清除浮动样式时，要注意当前元素是否为块结构，如果不是，要添加属性 display: block */
.clear { display: block!important; float: none!important; clear: both; width: auto!important; height: 0;margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0 }
.brank{ line-height:8px; clear:both; height:8px;margin: 0 auto!important; padding: 0!important; font-size: 0; float: none!important;}
.none{ display:none;}
table{<!--border-collapse:collapse;-->}
.header{height:112px;width:100%;position:relative;background:#fff;box-shadow:1px 1px 3px #999;}
.header .logo{width:178px;position:absolute;left:40px;top:18px;}
.header .nav{width:736px;margin:0 auto;}
.header .header_r{width:235px;position:absolute;right:40px;top:48px;}
.header .header_r a{font-size:14px;color:#010101;}
.header .header_r .search_form{width:127px;height:20px;background:url(../images/searchbg.png) no-repeat;}
.header .header_r .search_form .search_text{border:none;background:none;width:94px;padding:0 6px;height:20px;line-height:20px;vertical-align:top;}
.header .header_r .search_form .search_btn{border:none;background:none;width:20px;height:20px;cursor:pointer; vertical-align:top;}
.header .nav li{float:left;width:104px;height:112px;text-align:center;position:relative;}
.header .nav li a{display:inline-block;width:104px;height:94px;padding-top:18px;line-height:94px;font-size:14px;color:#010101;overflow:hidden}
.header .nav li span{display:block;width:104px;height:94px;padding-top:18px;line-height:94px;font-size:14px;color:#010101;overflow:hidden;margin-top:0;}
.header .nav li em{display:block;width:104px;height:112px;overflow:hidden;}
.header .nav li:hover a,.header .nav li.cur a{color:#fff;background:#dd137b;vertical-align:top;}
.header .nav li:hover span,.header .nav li.cur span{margin-top:-112px; }
.header .nav li ul{position:absolute;width:192px;background:#fff; z-index:9;display:none;}
.header .nav li ul li{width:192px;height:33px;line-height:33px;text-align:left;}
.header .nav li ul li a{height:33px;line-height:33px;width:174px;padding:0 0 0 18px;background:#fff !important;color:#010101 !important;}
.header .nav li ul li a:hover{background:#000000 !important;color:#fff !important;}
.wrap{width:1116px;margin:0 auto;}
/**首页轮播**/
.flash{height:500px;overflow:hidden;position:relative;}
.fadearry li {height:500px;}
.fadearry li a{display:block;width:100%;height:500px;}
.fadearry li img{}
.buttons{position:absolute;right:160px;bottom:16px;}
.buttons li{float:left;margin-right:8px;}
.buttons li a{float:left;background:#fff;width:14px;height:4px;display:inline-block;}
.buttons li a:hover,.buttons li.current a{background:#da0e78;}
.container{width:1000px;margin:14px auto 0;position:relative;}
/**首页关于我们**/
.index_about{padding:30px 0;}
.index_about .font01{font-size:36px;line-height:50px;font-weight:bold;}
.index_about .font02{font-size:24px;}
.index_about .info{margin-top:30px;}
/**首页分类****/
.index_fllist{height:247px;background:url(../images/flbg.jpg) no-repeat center center;}
.case_img_scroll{width:1116px;height:247px;position:relative;}
.case_img_scroll .prev,.case_img_scroll .next { position:absolute; top:105px;cursor:pointer;width:14px;height:30px;cursor:pointer; z-index:9;}
.case_img_scroll .prev:hover,.case_img_scroll .next:hover{filter:alpha(opacity=70); /*IE滤镜，透明度50%*/-moz-opacity:0.7; /*Firefox私有，透明度50%*/opacity:0.7;/*其他，透明度50%*/}
.case_img_scroll .prev{background:url(../images/leftbtn.png) no-repeat;left:-34px}
.case_img_scroll .next{background:url(../images/rightbtn.png) no-repeat; right:-34px}
.case_img_scroll .img_list { position:relative; width:1116px;overflow:hidden;padding-top:32px;}
.case_img_scroll .img_list ul { width:9999px;}
.case_img_scroll .img_list li { float:left;width:370px;margin-right:11px;text-align:center;}
.case_img_scroll .img_list li img{height:108px;width:90px;}
.case_img_scroll .img_list li p{height:65px;line-height:65px;}
.case_img_scroll .img_list li p a{font-size:14px;color:#fff;}
/**首页最新产品****/
.index_products {padding:28px 0;}
.index_products .tags_title {text-align:right;}
.index_products .tags_title .font01{font-size:36px;line-height:50px;font-weight:bold;}
.index_products .tags_title .font02{font-size:24px;}
.index_products .box{margin-bottom:15px;}
.index_products .box .title{font-size:24px;line-height:48px;border-bottom:1px solid #a0a0a0;}
.index_products .box ul {padding:20px 0;}
.index_products .box ul li{float:left;width:278px;text-align:center;}
.index_products .box ul li .img,.index_products .box ul li .img img{width:278px;height:193px;}
.index_products .box ul li .img{position:relative;}
.index_products .box ul li .img .price_box{position:absolute;left:0;bottom:0;width:278px;display:none;}
.index_products .box ul li .img .price_box .show_link{height:56px;line-height:56px;background:url(../images/titbg01.png) repeat;}
.index_products .box ul li .img .price_box .price_link{height:40px;line-height:40px;background:#fff;}
.index_products .box ul li .text{height:54px;padding-top:12px;}
.index_products .box ul li:hover .text{background:#dd137b;color:#fff;}
.index_products .box ul li:hover .text a{color:#fff;}
a.show_more{color:#fff;font-size:18px;height:40px;line-height:40px;background:#e13f92;padding:0 36px;display:inline-block;}
a.show_more:hover,a.buy_btn:hover,.contact_btn:hover{filter:alpha(opacity=70); /*IE滤镜，透明度50%*/-moz-opacity:0.7; /*Firefox私有，透明度50%*/opacity:0.7;/*其他，透明度50%*/}
/**首页友情链接****/
.friend_links{border-top:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;padding:20px 0;}
.friend_links li{float:left;background:url(../images/line.png) no-repeat right center;width:220px;text-align:center;height:40px;}
.friend_links li a{display:block;height:61px;}
/**footer****/
.footer .fot_info{padding:35px 0 0px;}
.footer .fot_info .fot_links{width:420px;}
.footer .fot_info .fot_contact{width:500px;border-left:1px dashed #ccc;color:#838282;padding-left:34px;}
.footer .fot_info .fot_contact p{line-height:30px;}
.footer .fot_info .fot_links dl{float:left;width:128px;height:30px;line-height:30px;}
.footer .fot_info .fot_links dl dd {height:30px;line-height:30px;}
.footer .fot_info .fot_links dl dd a{color:#838282;}
.footer .fot_info .fot_contact .font01{color:#000;font-size:24px;}
.footer .fot_info .fot_contact .fot_search{margin-top:6px;}
.footer .fot_info .fot_contact .fot_search .search_text{border:1px solid #bfbfbf;height:32px;line-height:32px;padding:0 24px;width:246px;background:url(../images/list01.png) no-repeat 3px center;}
.footer .fot_info .fot_contact .fot_search .search_btn{background:#bfbfbf;color:#fff;border:1px solid #bfbfbf;height:34px;width:88px;}
.footer .fot_bottom{background:#de1e81;padding:20px 0;color:#fff;margin-top:90px;}
.footer .fot_bottom li{float:left;width:31px;margin-left:18px;position:relative;}
.footer .fot_bottom li a{display:inline-block;width:31px;height:27px;}
.footer .fot_bottom li a.icon01{background:url(../images/icon04.png) no-repeat center center;}
.footer .fot_bottom li a.icon02{background:url(../images/icon05.png) no-repeat center center;}
.footer .fot_bottom li a.icon03{background:url(../images/icon06.png) no-repeat center center;}
.footer .fot_bottom li a:hover{filter:alpha(opacity=70); /*IE滤镜，透明度50%*/-moz-opacity:0.7; /*Firefox私有，透明度50%*/opacity:0.7;/*其他，透明度50%*/}
.footer .fot_bottom li .ico_box{position:absolute;width:175px;height:118px;background:#000;padding-top:24px;text-align:center;left:-80px;top:-172px;display:none;}
.footer .fot_bottom li .ico_box .cur{display:inline-block;width:22px;height:11px;background:url(../images/list02.png) no-repeat;position:absolute;bottom:-11px;left:80px;}
.footer .fot_bottom .box{background:#dd137b;padding:10px 15px 0px 0;}
/****/
.youce{width:50px; float:right; position:fixed; right:0px; bottom:170px;
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
_margin-bottom:15px; z-index:10000;
}
.youce ul li{width:50px; background:#606060;}
.youce ul li:hover{background:#dd137b;}
.youce ul li a{display:block; width:50px; height:50px;}
.youce ul li a.yc1{background:url(../images/yc_01.png) no-repeat center;}
.youce ul li a.yc2{background:url(../images/yc_02.png) no-repeat center;}
.youce ul li a.yc3{background:url(../images/yc_03.png) no-repeat center; width:50px; height:50px; position:relative;}
.youce ul li a.yc4{background:url(../images/yc_04.png) no-repeat center; width:50px; height:50px; position:relative;}
.youce ul li a.yc5{background:url(../images/yc_05.png) no-repeat center; width:50px; height:50px; position:relative;}
.youce ul li a.yc3 .wx_box,.youce ul li a.yc4 .wx_box,.youce ul li a.yc5 .wx_box{width:153px; padding-right:9px; display:none; cursor:default; position:absolute; bottom:0px; right:40px;}
.youce ul li a.yc3 .yc_weixin,.youce ul li a.yc4 .yc_weixin,.youce ul li a.yc5 .yc_weixin{background:#dd137b;}
.youce ul li a.yc3 .yc_weixin span,.youce ul li a.yc4 .yc_weixin span,.youce ul li a.yc5 .yc_weixin span{display:block; line-height:50px; color:#fff; text-align:center;}
.youce ul li a.yc3:hover .wx_box,.youce ul li a.yc4:hover .wx_box,.youce ul li a.yc5:hover .wx_box{display:inline;}
/**服务中心****/
.pages_banner{height:173px;}
.pages_banner .posi{padding:34px 0 0 54px;}
.pages_banner .fontposi,.pages_banner .fontposi a{color:#fff;}
.pages_banner .posi h2{line-height:60px;font-size:30px;font-weight:normal;}
.pages_banner .posi a.cur{ text-decoration:underline;}
.order_box .title span{margin-top:28px;}
.order_box .title span a{display:inline-block;width:82px;height:26px;text-align:center;line-height:20px;cursor:pointer;}
.order_box .title span a:hover,.order_box .title span a.cur{background:url(../images/titbg02.png) no-repeat;color:#fff;}
.white_bg{background:#fff;}
.order_box .order_cont{padding:26px 0 50px;}
/**常见问题****/
.question_box{background:url(../images/questionbg.jpg) no-repeat center top;padding-top:186px;padding-bottom:100px;}
.question_box .title{height:225px;background:url(../images/questionimg.jpg) no-repeat;}
.question_box li{border:1px solid #000;padding:26px 22px;margin-top:18px;}
.question_box li .tit{background:url(../images/list03.png) no-repeat left center;font-size:18px;padding-left:48px;cursor:pointer;}
.question_box li .question_cont{margin-top:20px;display:none;}
.question_box li.open .question_cont{display:block;}
.question_box li.open .tit{background:url(../images/list04.png) no-repeat left center;}
.service_customer{}
.service_customer .img,.service_customer .img img{width:347px;height:240px;}
.service_customer .text{width:710px;background:#fff;padding:24px;height:192px;}
.h320{height:320px;}
.about_box {position:relative;top:-68px;background:#fff url(../images/line01.jpg) repeat-x left bottom;padding-bottom:65px;}
.about_box .about_tit{height:68px;line-height:68px;background:#dd137b;color:#fff;text-align:center;font-size:30px;}
.about_box .about_mk{padding:30px 25px;}
.about_box .about_mk .tit{font-size:18px;}
/**花卉知识****/
.left_main{width:736px;margin-top:30px;}
.right_bar{width:336px;margin-top:30px;}
.knowledge_list{}
.knowledge_list li{padding-bottom:25px;border-bottom:1px solid #ccc;margin-bottom:25px;}
.knowledge_list li.noborder{border:none;}
.knowledge_list .data_time{width:166px;background:#fff;}
.knowledge_list .right_text{width:546px;}
.knowledge_list .data_time .mk01{height:64px;background:#010101;}
.knowledge_list .data_time .mk01 span.time{background:#da0e78;height:52px;color:#fff;font-size:18px;width:82px;text-align:center;display:inline-block;padding-top:12px;}
.knowledge_list .data_time .mk01 span.time em{font-size:32px;}
.knowledge_list .data_time .mk01 span.ll_box{font-size:18px;width:82px;text-align:center;display:inline-block;color:#4a4a4a;}
.knowledge_list .data_time .mk01 span.ll_box em{display:inline-block;background:url(../images/icon07.png) no-repeat;width:30px;height:25px;}
.knowledge_list .data_time .mk02{font-size:18px;height:44px;line-height:44px;}
.knowledge_list .right_text .img,.knowledge_list .right_text .img img{width:546px;height:270px;}
.knowledge_list .right_text h2{margin:18px 0;line-height:35px;}
.knowledge_list .right_text h2 a{font-size:24px;}
.read_more{color:#dd137b;font-size:14px;font-weight:bold;}
.knowledge_list .right_text .info{padding-bottom:15px;}
.knowledge_form{height:29px;border:1px solid #dcdcdc;border-bottom:2px solid #dcdcdc;border-radius:5px;}
.knowledge_form .search_text{width:290px;padding:0 6px;border:none;background:none;height:29px;line-height:29px;}
.knowledge_form .search_btn{width:25px;border:none;background:url(../images/icon08.png) no-repeat center center;height:29px;cursor:pointer;}
.menu{border:5px solid #d2d2d2;padding:4px 15px 15px;margin-top:20px;}
.menu .title{font-size:24px;color:#da0e78;line-height:40px;margin-bottom:12px;}
.menu ul li{height:40px;line-height:40px;border-bottom:1px solid #d2d2d2;}
.menu ul li a{font-size:16px;color:#666566;}
.menu ul li a:hover,.menu ul li a.cur{color:#da0e78;}
......
3.JS
代码如下（节选示例）：
function flash(_titles, _bodies) {
var defaultOpts = {
interval: 3000,
fadeInTime: 'slow',
fadeOutTime: 'slow'
};
var _count = _titles.length;
var _current = 0;
var _intervalID = null;
var stop = function() {
window.clearInterval(_intervalID);
};
var slide = function(opts) {
if (opts) {
_current = opts.current || 0;
} else {
_current = (_current >= (_count - 1)) ? 0 : (++_current);
};
_bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime,
function() {
_bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
//_bodies.removeClass("current").eq(_current).addClass("current");
});
_titles.removeClass("current").eq(_current).addClass("current");
//_titles_bg.removeClass("current").eq(_current).addClass("current");
}; //endof slide
var go = function() {
stop();
_intervalID = window.setInterval(function() {
slide();
},
defaultOpts.interval);
}; //endof go
var itemMouseOver = function(target, items) {
stop();
var i = $.inArray(target, items);
slide({
current: i
});
}; //endof itemMouseOver
_titles.hover(function() {
if ($(this).attr('class') != 'current') {
itemMouseOver(this, _titles);
} else {
stop();
}
},
go);
//_titles_bg.hover(function() { itemMouseOver(this, _titles_bg); }, go);
_bodies.hover(stop, go);
//trigger the slidebox
go();
}
// 图片左右滚动
function DY_scroll(wraper, prev, next, img, speed, or) {
var wraper = $(wraper);
var prev = $(prev);
var next = $(next);
var img = $(img).find('ul');
var w = img.find('li').outerWidth(true);
var s = speed;
next.click(function() {
img.animate({
'margin-left': -w
},
function() {
img.find('li').eq(0).appendTo(img);
img.css({
'margin-left': 0
});
});
});
prev.click(function() {
img.find('li:last').prependTo(img);
img.css({
'margin-left': -w
});
img.animate({
'margin-left': 0
});
});
if (or == true) {
ad = setInterval(function() {
next.click();
},
s * 1000);
wraper.hover(function() {
clearInterval(ad);
},
function() {
ad = setInterval(function() {
next.click();
},
s * 1000);
});
}
}
function b(){
h = $(window).height();
t = $(document).scrollTop();
if(t > h){
$('#gotop').show();
}else{
$('#gotop').hide();
}
}
// 图片上下滚动
function DY_scrolls(wraper, prev, next, img, speed, or) {
var wraper = $(wraper);
var prev = $(prev);
var next = $(next);
var img = $(img).find('ul');
var w = img.find('li').outerHeight(true);
var s = speed;
next.click(function() {
img.animate({
'margin-top': -w
},
function() {
img.find('li').eq(0).appendTo(img);
img.css({
'margin-top': 0
});
});
});
prev.click(function() {
img.find('li:last').prependTo(img);
img.css({
'margin-top': -w
});
img.animate({
'margin-top': 0
});
});
if (or == true) {
ad = setInterval(function() {
next.click();
},
s * 1000);
wraper.hover(function() {
clearInterval(ad);
},
function() {
ad = setInterval(function() {
next.click();
},
s * 1000);
});
}
}
$(document).ready(function() {
//首页flash
var ulnumli = $("ul.ulnum li");
var fadearry = $("ul.fadearry li");
flash(ulnumli, fadearry);
$("ul#index-ultab li").width($(document.body).width());
//图片左右滚动
DY_scroll('.img_scroll_a', '.prev_a', '.next_a', '.img_list_a', 3, 'false');
DY_scrolls('.img_scroll_c', '.prev_c', '.next_c', '.img_list_c', 3, 'false');
$("ul#smallimg li").click(function() {
$(this).addClass("cur").siblings().removeClass("cur");
var imgurl = $(this).children("img").attr("src");
var texturl = $(this).children().next('span').text();
$("div#bigimg img").attr("src", imgurl)
$("div#bigimg p").text(texturl);
});
$("span.prev_maximg").click(function() {
var tabli = $("ul#smallimg li.cur");
if (tabli.index() !== 0) {
$("ul#smallimg li").eq(tabli.index() - 1).click();
}
});
$("span.next_maximg").click(function() {
var tabli = $("ul#smallimg li.cur");
var maxli = $("ul#smallimg li").length;
if (tabli.index() !== maxli) {
$("ul#smallimg li").eq(tabli.index() + 1).click();
}
});
//导航
$(".nav > ul > li").hover(function() {
$(this).find("ul").animate({height:'show'}, {queue:true, duration:200});
$(this).stop().attr('class','cur');
},function(){
$(this).find("ul").hide();
$(this).stop().attr('class','');
});
$(".nav > ul > li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-112px" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});
......
五、更多推荐
您的支持是我创作的动力！关注作者，点赞收藏博文，获取更多源码，3Q！
Web前端网页制作、网页完整代码、大学生期末大作业模板案例、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
标签：Web,网页,img,ul,js,height,width,background,li From： https://blog.csdn.net/VX_L_5201314168/article/details/143106389