style:修改首页，产品详情，新品，nasr首页样式

refactor：重构了产品详情的图片预览功能，coyp了一个页面 add：新增了large.js这个是产品详情图片预览相关的
2025-05-10 17:33:35 +08:00
parent 999c8adc9d
commit b7c79da318
21 changed files with 860 additions and 138 deletions
--- a/public/static/index/css/category.css
+++ b/public/static/index/css/category.css
@@ -7,6 +7,9 @@
  overflow-x: hidden;
  background: #f9f9f9;
 }
+.oricoCont{
+   background: #f9f9f9;
+}
 .orico_Page_products .focus_image {
  padding-top: 3.75rem;
 }
@@ -20,15 +23,17 @@
 }
 .orico_Page_products .pageMain {
  width: 85%;
-  padding: 50px 0 2.5rem;
+  padding: 7.5rem 0 2.5rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
+  padding-top: 3.75rem;
 }
 .orico_Page_products .pageMain .ori-pd-title {
  font-size: 1.5em;
  color: #101010;
  margin-bottom: 1.25rem;
+  font-weight: 400;
 }
 .orico_Page_products .pageMain .ori-pd-list {
  display: flex;
@@ -62,12 +67,19 @@
 }
 .orico_Page_products .pageMain .ori-pd-list .oripditem .prdName {
  color: #101010;
-  font-size: 1.125rem;
+  font-size: 0.875rem;
  padding-bottom: 0.625rem;
+  width:80%;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .orico_Page_products .pageMain .ori-pd-list .oripditem .prddec {
-  font-size: 1.125rem;
+  font-size: 0.875rem;
  color: #737373;
+  width:80%;
+  text-align: center;
 }
 .orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors {
  width: 92%;
--- a/public/static/index/css/index.css
+++ b/public/static/index/css/index.css
@@ -798,8 +798,6 @@
  width: 100%;
 }
 .orico_Page_index .pageMain .oricoDataStatistics .odsmain {
-  max-width: 120rem;
-  min-width: 75rem;
  justify-content: center;
  align-items: center;
  flex-direction: row;
--- a/public/static/index/css/orico_footer.css
+++ b/public/static/index/css/orico_footer.css
@@ -48,8 +48,7 @@
  overflow-wrap: anywhere;
 }
 .orico_footer .fotter .footerMain .foottxtbottom {
-  padding-left: 10%;
-  padding-left: 14%;
+  padding-left: 5%;
  display: grid;
  padding-top: 8%;
 }
--- a/public/static/index/css/orico_header.css
+++ b/public/static/index/css/orico_header.css
@@ -160,7 +160,6 @@
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
-  z-index:9999;
 }
 .header-PC #header .nav2 .navItem .navItemConten1 li {
  color: #fff;
@@ -275,7 +274,7 @@
  border: 1px solid rgba(0, 0, 0, 0.2);
  position: fixed;
  right: 2%;
-  width: 45%;
+  width: 33%;
  top: 5rem;
  height: 80%;
  overflow-y: auto;
@@ -318,6 +317,9 @@
  margin-top: 10%;
  margin-left: 1%;
 }
+.header-PC .searchmodalMian .searchmodalct .popProduct .popmain{
+   width: 100%;
+}
 .header-PC .searchmodalMian .searchmodalct .searchhistory .popmain,
 .header-PC .searchmodalMian .searchmodalct .popProduct .popmain {
  display: flex;
@@ -327,7 +329,7 @@
 .header-PC .searchmodalMian .searchmodalct .searchhistory .popmain .popitem,
 .header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem {
  text-align: center;
-  margin-top: 10%;
+  margin-top: 7%;
  margin-left: 1%;
  display: flex;
  flex-direction: column;
@@ -354,11 +356,12 @@
 }
 .header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .productName 
 {
-  width: 100px;
+  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
+  font-size:14px
 }
 .header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .produc-dec{
  font-size: 10px;
--- a/public/static/index/css/product_category.css
+++ b/public/static/index/css/product_category.css
@@ -15,7 +15,7 @@
 }
 .orico_Page_category .pageMain {
  width: 85%;
-  padding: 50px 0 10px;
+  padding: 7.5rem 0 10px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
--- a/public/static/index/css/product_detail.css
+++ b/public/static/index/css/product_detail.css
@@ -13,7 +13,7 @@
 .orico_Page_prdetail a,
 .orico_Page_prdetail div,
 .orico_Page_prdetail span {
-  font-family: "Microsoft YaHei", "Arial", sans-serif;
+  font-family: 'Microsoft YaHei', 'Arial', sans-serif;
 }
 .orico_Page_prdetail .oriprdetail {
  display: flex;
@@ -89,7 +89,15 @@
  height: 5.4375rem;
  overflow: hidden;
 }
-.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .smallImg #imageMenu li img {
+.orico_Page_prdetail
+  .oriprdetail
+  .cp
+  .cpfl
+  .preview
+  .smallImg
+  #imageMenu
+  li
+  img {
  width: 98%;
  cursor: pointer;
 }
@@ -107,7 +115,13 @@
  overflow: hidden;
 }
 .orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp,
-.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp.disabled {
+.orico_Page_prdetail
+  .oriprdetail
+  .cp
+  .cpfl
+  .preview
+  .bigImg
+  .smallImgUp.disabled {
  background: url(/static/index/images/fl.png) no-repeat;
  position: absolute;
  z-index: 1;
@@ -117,11 +131,23 @@
  left: -2%;
 }
 .orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp:hover,
-.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp.disabled:hover {
+.orico_Page_prdetail
+  .oriprdetail
+  .cp
+  .cpfl
+  .preview
+  .bigImg
+  .smallImgUp.disabled:hover {
  background: url(/static/index/images/fl1.png) no-repeat;
 }
 .orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown,
-.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown.disabled {
+.orico_Page_prdetail
+  .oriprdetail
+  .cp
+  .cpfl
+  .preview
+  .bigImg
+  .smallImgDown.disabled {
  background: url(/static/index/images/rh.png) no-repeat;
  position: absolute;
  z-index: 1;
@@ -129,8 +155,20 @@
  top: 50%;
  transform: translate(0%, -50%);
 }
-.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown:hover,
-.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown.disabled:hover {
+.orico_Page_prdetail
+  .oriprdetail
+  .cp
+  .cpfl
+  .preview
+  .bigImg
+  .smallImgDown:hover,
+.orico_Page_prdetail
+  .oriprdetail
+  .cp
+  .cpfl
+  .preview
+  .bigImg
+  .smallImgDown.disabled:hover {
  background: url(/static/index/images/rh1.png) no-repeat;
 }
 .orico_Page_prdetail .oriprdetail .cp .cprh {
@@ -158,7 +196,14 @@
  display: table;
  width: 100%;
 }
-.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row {
+.orico_Page_prdetail
+  .oriprdetail
+  .cp
+  .cprh
+  .cpcon
+  .proTfg
+  .swt-Table
+  .Table-Row {
  display: table-row;
  width: 100%;
  clear: both;
@@ -166,21 +211,53 @@
  font-size: 0.875em;
  color: #737373;
 }
-.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .Table-Cell {
+.orico_Page_prdetail
+  .oriprdetail
+  .cp
+  .cprh
+  .cpcon
+  .proTfg
+  .swt-Table
+  .Table-Row
+  .Table-Cell {
  display: table-cell;
  margin: 0;
  padding: 4px 0;
  line-height: 1.4em;
 }
-.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .ms2 {
+.orico_Page_prdetail
+  .oriprdetail
+  .cp
+  .cprh
+  .cpcon
+  .proTfg
+  .swt-Table
+  .Table-Row
+  .ms2 {
  width: 5%;
 }
-.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .ms3 {
+.orico_Page_prdetail
+  .oriprdetail
+  .cp
+  .cprh
+  .cpcon
+  .proTfg
+  .swt-Table
+  .Table-Row
+  .ms3 {
  width: 30%;
  color: #333;
  font-size: 14px;
 }
-.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .ms4 {
+.orico_Page_prdetail
+  .oriprdetail
+  .cp
+  .cprh
+  .cpcon
+  .proTfg
+  .swt-Table
+  .Table-Row
+  .ms4 {
  width: 65%;
  font-size: 14px;
 }
@@ -208,7 +285,14 @@
  flex-direction: row;
  align-items: center;
 }
-.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .prcolors .dowebok .itemcolor {
+.orico_Page_prdetail
+  .oriprdetail
+  .cp
+  .cprh
+  .cpcon
+  .prcolors
+  .dowebok
+  .itemcolor {
  width: 20px;
  height: 20px;
  float: left;
@@ -218,12 +302,27 @@
  border: 1px solid #d4d4d4;
  border-radius: 10px;
 }
-.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .prcolors .dowebok .itemcolor img {
+.orico_Page_prdetail
+  .oriprdetail
+  .cp
+  .cprh
+  .cpcon
+  .prcolors
+  .dowebok
+  .itemcolor
+  img {
  width: 20px;
  height: 20px;
  border-radius: 10px;
 }
-.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .prcolors .dowebok .itemcolor.on {
+.orico_Page_prdetail
+  .oriprdetail
+  .cp
+  .cprh
+  .cpcon
+  .prcolors
+  .dowebok
+  .itemcolor.on {
  width: 20px;
  height: 20px;
  border-radius: 12px;
@@ -276,15 +375,21 @@
  display: inline-block;
  margin: 0 auto;
  font-size: 1rem;
-  font-weight: bold;
+  padding-bottom: 1rem;
+  cursor: pointer;
+}
+.orico_Page_prdetail .oriprdetail .oriprInfo .titleprinfo a:first-child{
+  color:#009FDF;
 }
 .orico_Page_prdetail .oriprdetail .oriprInfo .products_des {
  width: 75%;
  margin-bottom: 50px;
+  margin: 0 auto;
 }
 .orico_Page_prdetail .oriprdetail .oriprInfo .products_des img {
  text-align: center;
  display: block;
+  margin: 0 auto;
 }
 .orico_Page_prdetail .XJmodal {
  display: none;
@@ -345,8 +450,8 @@
 .orico_Page_prdetail .XJmodal-content .tkitem .form-group .detail-w01 {
  width: 90%;
 }
-.orico_Page_prdetail .XJmodal-content .tkitem .form-group input[type=text],
-.orico_Page_prdetail .XJmodal-content .tkitem .form-group input[type=email],
+.orico_Page_prdetail .XJmodal-content .tkitem .form-group input[type='text'],
+.orico_Page_prdetail .XJmodal-content .tkitem .form-group input[type='email'],
 .orico_Page_prdetail .XJmodal-content .tkitem .form-group select,
 .orico_Page_prdetail .XJmodal-content .tkitem .form-group textarea {
  border: 1px solid #ccc;
@@ -379,7 +484,7 @@
  margin-right: 0;
 }
 .orico_Page_prdetail .XJmodal-content .submit-btn {
-  background-color: #004CFA;
+  background-color: #004cfa;
  color: white;
  padding: 10px 100px;
  border: none;
@@ -389,5 +494,96 @@
  display: block;
 }
 .orico_Page_prdetail .XJmodal-content .submit-btn:hover {
-  background-color: #004CFA;
+  background-color: #004cfa;
+}
+.enlarge-img {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 99999;
+  top: 0;
+  left: 0;
+  text-align: center;
+  display: none;
+}
+
+.enlarge-img img {
+  height: 100vh;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.enlarge-img .close {
+  position: absolute;
+  width: 100%;
+  height: 28px;
+  z-index: 9;
+  top: 0px;
+  color: #fff;
+  font-size: 0.875em;
+  cursor: pointer;
+  text-align: right;
+}
+
+.enlarge-img .close span {
+  display: inline-block;
+  margin-right: 2%;
+  font-size: 24px;
+  height: 40px;
+  width: 40px;
+  border: 1px solid #fff;
+  text-align: center;
+  line-height: 40px;
+  border-radius: 20px;
+  cursor: pointer;
+}
+
+.scrollbutton,
+.scrollbutton_01 {
+  width: 53px;
+  height: 72px;
+  overflow: hidden;
+}
+
+.smallImgUp,
+.smallImgUp .disabled,
+.smallImgUp:hover,
+.smallImgUp .disabled:hover,
+.smallImgDown,
+.smallImgDown .disabled,
+.smallImgDown:hover,
+.smallImgDown.disabled:hover {
+  position: absolute;
+  z-index: 8;
+  top: 50%;
+  cursor: pointer;
+  transform: translate(0%, -50%);
+  background-repeat: no-repeat;
+}
+
+.scrollbutton_01.smallImgUp,
+.scrollbutton_01.smallImgUp.disabled {
+  background: url(/static/index/images/fl.png);
+  left: 0px;
+}
+
+.scrollbutton_01.smallImgDown,
+.scrollbutton_01.smallImgDown.disabled {
+  background: url(/static/index/images/rh.png);
+  right: 0px;
+}
+
+.scrollbutton.smallImgUp,
+.scrollbutton.smallImgUp.disabled {
+  background: url(/static/index/images/fl.png);
+  left: 90px;
+  margin-top: -24.5px;
+}
+
+.scrollbutton.smallImgDown,
+.scrollbutton.smallImgDown.disabled {
+  background: url(/static/index/images/rh.png);
+  right: 0px;
+  margin-top: -24.5px;
 }
--- a/public/static/index/css/product_newpro.css
+++ b/public/static/index/css/product_newpro.css
@@ -7,11 +7,14 @@
  overflow-x: hidden;
  background: #f9f9f9;
 }
+.oricoCont{
+  background: #f9f9f9;
+}
 .orico_Page_newproducts p,
 .orico_Page_newproducts a,
 .orico_Page_newproducts div,
 .orico_Page_newproducts span {
-  font-family: "Microsoft YaHei", "Arial", sans-serif;
+  font-family: 'Microsoft YaHei', 'Arial', sans-serif;
 }
 .orico_Page_newproducts .opdBanner {
  width: 100%;
@@ -25,21 +28,49 @@
  object-fit: cover;
  transition: opacity 1s ease-in-out;
 }
-.orico_Page_newproducts .opdbanner>a:first-child {
+.orico_Page_newproducts .opdbanner > a:first-child {
  display: block;
 }
 .orico_Page_newproducts .oricoNewPrMain {
  width: 85%;
-  padding: 50px 0 10px;
+  padding: 7.5rem 0 10px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
 }
+.orico_Page_newproducts .oricoNewPrMain .cat {
+  margin-bottom: 3.75rem;
+}
 .orico_Page_newproducts .oricoNewPrMain .ori-pd-title {
-  font-size: 1.5em;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-title .catname {
+  font-size: 1.5rem;
  color: #101010;
  margin-bottom: 1.25rem;
 }
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-title .catmore {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 1%;
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-title .catmore .tmore {
+  font-size: 1rem;
+  color: #444;
+  font-weight: 500;
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-title .catmore .catmoreImg {
+  width: 1.75rem;
+  height: 1.75rem;
+  margin-left: 0.5rem;
+}
+
+
+
 .orico_Page_newproducts .oricoNewPrMain .ori-pd-list {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
@@ -87,16 +118,32 @@
  color: #444;
  font-size: 0.875rem;
  padding-bottom: 0.625rem;
-  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+  width: 80%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem .prddec {
  font-size: 0.875rem;
  color: #737373;
 }
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem .newcp {
+  width: 72px;
+  height: 30px;
+  background: #df2c39;
+  font-size: 12px;
+  color: #fff;
+  text-align: center;
+  line-height: 30px;
+  position: absolute;
+  top: 0px;
+  left: 50%;
+  transform: translate(-50%, 0%);
+}
 .orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem:hover {
  box-shadow: 0px 5px 35px rgba(227, 227, 227, 0.75);
  transform: translate3d(0, -2px, 0);
--- a/public/static/index/css/product_search.css
+++ b/public/static/index/css/product_search.css
@@ -56,13 +56,19 @@
  display: flex;
  flex-direction: row;
 }
-.orico_Page_search .searchMain .seul .seitme .search-pr-img {
-  float: left;
+.orico_Page_search .searchMain .seul .seitme .imgb {
  padding: 9px 10px;
  border: 1px solid #e7e7e7;
  overflow: hidden;
+  float: left;
  width: 140px;
 }
+.orico_Page_search .searchMain .seul .seitme .imgb .search-pr-img {
+  width: 100%;
+  opacity: 1;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+}
 .orico_Page_search .searchMain .seul .seitme .prInfp {
  display: flex;
  flex-direction: column;
@@ -72,6 +78,7 @@
 .orico_Page_search .searchMain .seul .seitme .prInfp .txt1 {
  font-size: 1.125rem;
  color: #333;
+  padding-bottom: 0.5rem;
 }
 .orico_Page_search .searchMain .seul .seitme .prInfp .txt2 {
  font-size: 0.875rem;
@@ -89,6 +96,10 @@
  font-weight: bold;
  color: rgb(255, 0, 0);
 }
+.orico_Page_search .searchMain .seul .seitme:hover .search-pr-img {
+  -webkit-transform: scale3d(1.2, 1.2, 1);
+  transform: scale3d(1.2, 1.2, 1);
+}
 .orico_Page_search .searchMain ::placeholder {
  color: #737373;
 }
--- a/public/static/index/css/product_subcategory.css
+++ b/public/static/index/css/product_subcategory.css
@@ -12,7 +12,7 @@
 }
 .orico_Page_subcategory .pageMain {
  width: 85%;
-  padding: 50px 0 10px;
+  padding: 7.5rem 0 10px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
--- a/public/static/index/css/public.css
+++ b/public/static/index/css/public.css
@@ -60,7 +60,7 @@ button {
 }

 a {
-	color: #000;
+	color: #333;
 	cursor: pointer;
 	text-decoration: none;
 	transition: all 0.2s linear;
--- a/public/static/index/css/topic_nas_header.css
+++ b/public/static/index/css/topic_nas_header.css
@@ -10,7 +10,7 @@
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
-    width: 75rem;
+    max-width: 75rem;
    margin: 0 auto;
 }

--- a/public/static/index/css/topic_nas_index.css
+++ b/public/static/index/css/topic_nas_index.css
@@ -26,9 +26,11 @@
 	width: 100%;
 	position: relative;
 	overflow: hidden;
-	height: 56.4375rem;
+	max-height: 56.4375rem;
+}
+.narsIndex-banner img{
+  width: 100%;
 }
-
 .narsIndex-banner .mySwiper .swiper-slide {
 	position: relative;
 }
@@ -128,7 +130,7 @@
 	flex-direction: row;
 	justify-content: space-between;
 	height: auto;
-	min-width: 1024px;
+	/* min-width: 1024px; */
 	overflow: hidden;
 	margin: 0 7.5rem;
 }
@@ -436,7 +438,7 @@
 }
 .nars-wlj .wltitem {
 	margin: 0 7.5rem;
-	min-width: 1024px;
+	/* min-width: 1024px; */
 	background: #000;
 	display: flex;
 	flex-direction: row;
--- a/public/static/index/images/more.png
+++ b/public/static/index/images/more.png
--- a/public/static/index/js/headfoot.js
+++ b/public/static/index/js/headfoot.js
@@ -1,51 +0,0 @@
-//加载公共头部和尾部
-async function loadHTML(url, targetId) {
-	try {
-		const response = await fetch(url);
-		if (!response.ok) {
-			throw new Error(`HTTP error! status: ${response.status}`);
-		}
-		const html = await response.text();
-		document.getElementById(targetId).innerHTML = html;
-	} catch (error) {
-		console.error('Error loading HTML:', error);
-	}
-}
-// 加载头部
-loadHTML('head.html', 'header');
-// 加载尾部
-loadHTML('footer.html', 'footer');
-$(document).ready(function() {
-	// 封装一个函数用于处理鼠标悬停显示和隐藏内容
-	function handleHover($element, $content) {
-		$element.mouseenter(function() {
-			$content.stop(true, true).slideDown(400);
-		}).mouseleave(function() {
-			$content.stop(true, true).slideUp(400);
-		});
-	}
-	// 处理第一个导航项
-	handleHover($('.navItem').eq(0), $('.navItem').eq(0).find('.navItemConten'));
-	// 鼠标移入navItem_cyleft里面的li标签添加类，移除其他li的类
-	$('.navItem_cyleft li').mouseenter(function() {
-		$(this).addClass('it_active').siblings().removeClass('it_active');
-	});
-	// 处理第5 - 8个导航项
-	for (let i = 4; i < 8; i++) {
-		handleHover($('.navItem').eq(i), $('.navItem').eq(i).find('.navItemConten1'));
-	}
-	// 点击搜索
-	$('#openModalBtn').click(function() {
-		$('#scmodal').toggle();
-	});
-	$('.close-btn').click(function() {
-		$('#scmodal').hide();
-	});
-	// 点击选择国家
-	$('#countrycheck').click(function() {
-		$('#top-country').toggle();
-	});
-	$('.closecountrybt').click(function() {
-		$('#top-country').hide();
-	});
-});
--- a/public/static/index/js/large.js
+++ b/public/static/index/js/large.js
@@ -0,0 +1,184 @@
+$(document).ready(function () {
+  // 图片上下滚动
+  var count = $("#imageMenu li").length; /* 显示 5 个 li标签内容 */
+  var interval = $("#imageMenu li:first").height();
+  var curIndex = 0;
+  if (curIndex > count) curIndex = 0;
+  //左右箭头切换图片
+  $('.scrollbutton').click(function () {
+    if ($(this).hasClass('disabled')) return false;
+    if ($(this).hasClass('smallImgUp')) --curIndex;
+    else ++curIndex;
+    $('.scrollbutton').removeClass('disabled');
+    if (curIndex == 0) $('.smallImgUp').addClass('disabled');
+    if (curIndex == count - 1) $('.smallImgDown').addClass('disabled');
+    $("#imageMenu ul").stop(false, true).animate({
+      "marginTop": -curIndex * interval + "px"
+    }, 600);
+    //获取当前指定的图片属性
+    var midImg = $("#imageMenu li").eq(curIndex).find('img').attr('src');
+    //切换图片
+    $("#midimg").attr('src', midImg);
+    $(".enlarge-img").find("img").attr('src', midImg);
+    //小图添加属性
+    $("#imageMenu li").eq(curIndex).addClass('on').siblings().removeClass("on");
+  });
+  //大图左右箭头切换图片
+  $('.scrollbutton_01').click(function () {
+    if ($(this).hasClass('disabled')) return false;
+    if ($(this).hasClass('smallImgUp')) --curIndex;
+    else ++curIndex;
+    $('.scrollbutton_01').removeClass('disabled');
+    if (curIndex == 0) $('.smallImgUp').addClass('disabled');
+    if (curIndex == count - 1) $('.smallImgDown').addClass('disabled');
+    //$("#imageMenu ul").stop(false, true).animate({"marginTop" : -curIndex*interval + "px"}, 600);
+    $("#imageMenu ul").stop(false, true).animate({
+      "marginTop": -curIndex * interval + "px"
+    }, 600);
+    //获取当前指定的图片属性
+    var midImg = $("#imageMenu li").eq(curIndex).find('img').attr('src');
+    //切换图片
+    $("#midimg").attr('src', midImg);
+    $(".enlarge-img").find("img").attr('src', midImg);
+    //小图添加属性
+    $("#imageMenu li").eq(curIndex).addClass('on').siblings().removeClass("on");
+  });
+
+  function isIE() {
+    return /MSIE|Trident/.test(navigator.userAgent);
+  }
+  // 解决 ie6 select框 问题
+  $.fn.decorateIframe = function (options) {
+    if (isIE()) {
+      var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
+      $(this).each(function () {
+        var $myThis = $(this);
+        //创建一个IFRAME
+        var divIframe = $("<iframe />");
+        divIframe.attr("id", opts.iframeId);
+        divIframe.css("position", "absolute");
+        divIframe.css("display", "none");
+        divIframe.css("display", "block");
+        divIframe.css("z-index", opts.iframeZIndex);
+        divIframe.css("border");
+        divIframe.css("top", "0");
+        divIframe.css("left", "0");
+        if (opts.width == 0) {
+          divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 +
+            "px");
+        }
+        if (opts.height == 0) {
+          divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) *
+            2 + "px");
+        }
+        divIframe.css("filter", "mask(color=#fff)");
+        $myThis.append(divIframe);
+      });
+    }
+  }
+  $.fn.decorateIframe.defaults = {
+    iframeId: "decorateIframe1",
+    iframeZIndex: -1,
+    width: 0,
+    height: 0
+  }
+  //放大镜视窗
+  $("#bigView").decorateIframe();
+  //点击到中图
+  var midChangeHandler = null;
+  $("#imageMenu li img").bind("click", function () {
+    if ($(this).attr("id") != "onlickImg") {
+      midChange($(this).attr("src"));
+      $("#imageMenu li").removeAttr("id");
+      //$(this).parent().attr("id", "onlickImg");
+    }
+  }).bind("mouseover", function () {
+    if ($(this).attr("id") != "onlickImg") {
+      window.clearTimeout(midChangeHandler);
+      midChange($(this).attr("src"));
+      // $(this).css({ "border": "1px solid #990000" });
+    }
+  }).bind("mouseout", function () {
+    if ($(this).attr("id") != "onlickImg") {
+      $(this).removeAttr("style");
+      midChangeHandler = window.setTimeout(function () {
+        midChange($("#onlickImg img").attr("src"));
+      }, 1000);
+    }
+  });
+  //点击中图，切换大图
+  $("#midimg").bind("click", function () {
+    $(".enlarge-img").find("img").attr("src", $(this).attr("src"));
+  });
+
+  function midChange(src) {
+    $("#midimg").attr("src", src).load(function () {
+      changeViewImg();
+    });
+  }
+  //大视窗看图
+  function mouseover(e) {
+    if ($("#winSelector").css("display") == "none") {
+      $("#winSelector,#bigView").show();
+    }
+    $("#winSelector").css(fixedPosition(e));
+    e.stopPropagation();
+  }
+
+  function mouseOut(e) {
+    if ($("#winSelector").css("display") != "none") {
+      $("#winSelector,#bigView").hide();
+    }
+    e.stopPropagation();
+  }
+  $("#midimg").mouseover(mouseover); //中图事件
+  $("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件
+  var $divWidth = $("#winSelector").width(); //选择器宽度
+  var $divHeight = $("#winSelector").height(); //选择器高度
+  var $imgWidth = $("#midimg").width(); //中图宽度
+  var $imgHeight = $("#midimg").height(); //中图高度
+  var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度
+  function changeViewImg() {
+    $("#bigView img").attr("src", $("#midimg").attr("src"));
+  }
+  changeViewImg();
+  $("#bigView").scrollLeft(0).scrollTop(0);
+
+  function fixedPosition(e) {
+    if (e == null) {
+      return;
+    }
+    var $imgLeft = $("#midimg").offset().left; //中图左边距
+    var $imgTop = $("#midimg").offset().top; //中图上边距
+    X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
+    Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
+    X = X < 0 ? 0 : X;
+    Y = Y < 0 ? 0 : Y;
+    X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
+    Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;
+    if ($viewImgWidth == null) {
+      $viewImgWidth = $("#bigView img").outerWidth();
+      $viewImgHeight = $("#bigView img").height();
+      if ($viewImgWidth < 200 || $viewImgHeight < 200) {
+        $viewImgWidth = $viewImgHeight = 800;
+      }
+      $height = $divHeight * $viewImgHeight / $imgHeight;
+      $("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
+      $("#bigView").height($height);
+    }
+    var scrollX = X * $viewImgWidth / $imgWidth;
+    var scrollY = Y * $viewImgHeight / $imgHeight;
+    $("#bigView img").css({
+      "left": scrollX * -1,
+      "top": scrollY * -1
+    });
+    $("#bigView").css({
+      "top": 0,
+      "left": $(".preview").offset().left + $(".preview").width() + 15
+    });
+    return {
+      left: X,
+      top: Y
+    };
+  }
+});