源码在后面
效果展示图片
功能
调用外部数据，动态建立路径导航调用外部数据，动态建立图片展示页面，为并未主图绑定鼠标移入、移动、移出事件，实现放大镜详情展示并为左右按钮绑定左右按钮事件，进行切换为小图绑定切换事件，由小图切换主图动态渲染选择区域高亮切换选中的样式计算选中样式的总价格切换选项卡以及选项卡的内容搭配其他东西的价格计算
代码
html
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/index.css"/></head><body><!-- 模拟body --><div class="wrap"><!-- 头部 --><div class="header"><div class="top"><div class="topMain"><!-- 左边登录注册 --><div class="login"><p>欢迎来到AppleStore! 请</p><a href="##">登录</a><a href="##">注册</a></div><div class="topNav"><a href="###">我的订单</a><a href="###">我的购物车</a><a href="###">我的AppleStore</a><a href="###">我的AppleStore会员</a><a href="###">企业采购</a><a href="###">关注AppleStore</a><a href="###">合作招商</a><a href="###">关商家后台</a></div></div></div><div class="bottom"><div class="logo"><a href="###"><img src="images/Logo.png" ></a></div><div class="search"><input type="text" name="" id="" value="" /><button type="button">搜索</button></div></div></div><!-- 分类导航 --><div class="typeNav"><div class="typeNavMain"><h3>全部商品分类</h3><div><a href="##">服装城</a><a href="##">美妆馆</a><a href="##">尚品汇超市</a><a href="##">全球购</a><a href="##">闪购</a><a href="##">团购</a><a href="##">有趣</a><a href="##">秒杀</a></div></div></div><!-- 商品内容区域 --><div class="mainCon"><!-- 路径导航 --><div class="pathNav"><!-- <a href="##">手机、数码、通讯</a><i>/</i><a href="##">手机</a><i>/</i><a href="##">Apple苹果</a><i>/</i><a>iphone 6s系类</a> --></div><!-- 商品区域 --><div class="infoWrap"><!-- 放大镜区域 --><div class="previw"><!-- 细节图 --><div class="zoomImgBox"><!-- <img src="images/b1.png" > --><!-- 蒙版 --></div><!-- 缩略图 --><div class="thumbnail"><span class="leftbut"><</span><div class="itemWrap"><ul><!-- <li><img src="images/b1.png" ></li><li><img src="images/b2.png" ></li><li><img src="images/b3.png" ></li><li><img src="images/b1.png" ></li><li><img src="images/b2.png" ></li><li><img src="images/b3.png" ></li><li><img src="images/b1.png" ></li><li><img src="images/b2.png" ></li><li><img src="images/b3.png" ></li><li><img src="images/b1.png" ></li><li><img src="images/b2.png" ></li><li><img src="images/b3.png" ></li> --></ul></div><span class="rightbut">></span></div><!-- 大图 --></div><!-- 商品信息展览区域 --></div><!--筛选区域--><div class="chooseWrap"><!-- 信息区域 --><div class="infoTop"></div><!-- 选择区域 --><div class="choose"><div class="choosed"><!-- <mark>黑色<a href="javascript:;">X</a></mark> --></div><div class="chooseArea"><!-- <dl><dt>选择颜色</dt><dd>金色</dd><dd>银色</dd><dd>黑色</dd><dd>粉色</dd></dl><dl><dt>内存容量</dt><dd>16G</dd><dd>64G</dd><dd>128G</dd><dd>256G</dd></dl><dl><dt>选择版本</dt><dd>公开版</dd><dd>移动版</dd></dl><dl><dt>购买方式</dt><dd>官方标配</dd><dd>优惠移动版</dd><dd>电信优惠版</dd></dl> --></div><!-- 购物车区域 --><div class="carWrap"><div class="control"><input type="text" name="" id="" value="1" /><a href="javascript:;">+</a><a href="javascript:;" class="minus">-</a></div><button type="button">加入购物车</button></div></div></div></div><!-- 商品详情区域 --><div class="detialWrap"><!-- 侧边栏 --><aside><!-- 选项卡切换标题 --><div class="tabBut"><h4 class="active">相关分类</h4><h4>推荐品牌</h4></div><!-- 选项卡内容区 --><div class="tabContent"><div class="active"><ul><li>手机</li><li>手机壳</li><li>内存卡</li><li>iphone配件</li><li>贴膜</li><li>手机耳机</li><li>移动电源</li><li>平板电脑</li></ul><ul class="imgList"><li><img src="images/part01.png" ><span class="productName">Apple苹果iPhone 6s (A1699)</span><span class="productPrice">¥6088.00</span><!-- <button type="button">加入购物车</button> --><br><div class="carbut"><a href="javascript:;">加入购物车</a></div></li><li><img src="images/part01.png" ><span class="productName">Apple苹果iPhone 6s (A1699)</span><span class="productPrice">¥6088.00</span><!-- <button type="button">加入购物车</button> --><br><div class="carbut"><a href="javascript:;">加入购物车</a></div></li><li><img src="images/part01.png" ><span class="productName">Apple苹果iPhone 6s (A1699)</span><span class="productPrice">¥6088.00</span><!-- <button type="button">加入购物车</button> --><br><div class="carbut"><a href="javascript:;">加入购物车</a></div></li></ul></div><div>推荐品牌</div></div></aside><div class="detail"><!-- 选择搭配 --><div class="fitting"><p>选择搭配</P><div class="goods"><div class="phone"><img src="images/l-m01.png" ><span>¥5299</span><i>+</i></div><ul class="goodSuit"><li><img src="images/dp01.png" ><span>Feless费勒斯VR</span><br><label><input type="checkbox" name="" id="" value="50" /><span>50</span></label></li><li><img src="images/dp02.png" ><span>Feless费勒斯VR</span><br><label><input type="checkbox" name="" id="" value="100" /><span>100</span></label></li><li><img src="images/dp03.png" ><span>Feless费勒斯VR</span><br><label><input type="checkbox" name="" id="" value="150" /><span>150</span></label></li><li><img src="images/dp04.png" ><span>Feless费勒斯VR</span><br><label><input type="checkbox" name="" id="" value="250" /><span>250</span></label></li></ul><div class="buyList"><span>已购0件商品</span><h4>套餐价</h4><p>¥5299</p><button type="button">加入购物车</button></div></div></div><!-- 详细介绍 --><div class="intro"><!-- 选项卡标题栏 --><ul class="butTitle"><li class="goodsbut"><a href="javascript:;">商品介绍</a></li><li><a href="javascript:;">规格预包装</a></li><li><a href="javascript:;">售后保障</a></li><li><a href="javascript:;">商品评价</a></li><li><a href="javascript:;">手机社区</a></li></ul><!-- 详情内容 --><div class="introContent"><div class="active"><ul><li>分辨率：1920*1080(FHD)</li><li>后置摄像头：1200万像素</li><li>前置摄像头：500万像素</li><li>核 数：其他</li><li>频 率：以官网信息为准</li><li>品牌： Apple</li><li>商品名称：APPLEiPhone 6s Plus</li><li>商品编号：1861098</li><li>商品产地：中国大陆</li><li>商品毛重：0.51kg</li><li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li><li>系统：苹果（IOS）</li><li>像素：1000-1600万品毛重：0.51kg</li><li>机身内存：64GB</li></ul><img src="images/intro01.png" ><img src="images/intro02.png" ><img src="images/intro03.png" ></div><div>规格预包装</div><div>售后保障</div><div>商品评价</div><div>手机社区</div></div></div></div></div></div></body>
css样式（less文件）
.clearFix{*zoom: 1;&::after{content:"";display: block;clear:both;}}html{overflow-y: scroll;}// 侧边栏/* .aside{position: relative;.toolbar{// float: rig;width: 300px;height: 100%;background-color: #7a6e6e;transform: right .3s ease-in-out 0s;position: fixed;top: 0;right: -294px;.content{width: 294px;left: 6px;background-color:bisque ;}.toolList{width: 35px;height: 35px;background-color:#7a6e6e ;border-radius: 3px 0 0 3px;// left: -29px;li{}}}} */// header头部导航栏.top{// width: 100%;background-color:#eaeaea ;.topMain{width: 1200px;height: 30px;margin: 0 auto;.login{// width: 100px;height: 30px;// background-color: yellow;float: left;line-height: 30px;text-align: center;p{display: block;float: left;margin-right: 4px;}a{float: left;margin-right: 4px;}}.topNav{// width: 400px;height: 30px;// background-color: skyblue;float: right;a{display: block;float: left;line-height: 30px;// text-align: center;border-left: 1px solid #b3aeae;padding: 0 10px;}}}}.bottom{width: 1200px;// background-color: pink;margin: 0 auto;.clearFix();.logo{float: left;img{width: 175px;height: 56px;margin: 25px 45px;}}.search{float: right;margin-top: 35px;input{box-sizing: border-box;width: 490px;height: 32px;// margin-top: 35px;padding: 0 4px;border: 2px solid #ea4a36;float: left;}button{width: 68px;height: 32px;background-color: #ea4a36;// margin-top: 35px;color: #fff;float: left;}}}// typeNav分类导航.typeNav{.typeNavMain{width: 1200px;height: 50px;margin: 0 auto;border-bottom: 2px solid #e1251b;line-height: 50px;text-align: center;.clearFix();h3{float: left;width: 210px;height: 50px;background-color:#e1251b ;color: #fff;font-size: 14px;font-weight: 700;// line-height: 50px;// text-align: center;}a{font-size: 16px;color: #333;margin: 0 22px;float: left;}}}//mainCon 商品内容区域.mainCon{width: 1200px;margin:15px auto 0;.clearFix();// position: relative;//pathNav 路径导航.pathNav{box-sizing: border-box;// width: 1200px;padding: 9px 15px 9px 0px;i{color: #ccc;padding: 0 2px;}}// infoWrap 商品区域.infoWrap{margin: 5px 0 15px;height: 500px;// position: absolute;float: left;// 放大镜区域.previw{width: 400px;position: absolute;.zoomImgBox{width: 100%;height: 400px;border: 1px solid #dfdfdf;position: relative;img{width: 100%;height: 100%;}.mask{width: 200px;height: 200px;background-color: rgba(255,255,255,.5);border: 1px solid #ddd;position: absolute;left: 0;top: 0;}}// 缩略图区域.thumbnail{width: 100%;margin: 5px 0 0;height: 54px;// 作用按钮span{width: 10px;height: 54px;border: 1px solid #ccc;background-color: #ebebeb;float: left;line-height: 54px;text-align: center;cursor: pointer;&.leftbut{margin-right: 4px;}}// 缩略图片.itemWrap{width: 372px;height: 56px;overflow: hidden;float: left;position: relative;ul{.clearFix();width: 999px;position: absolute;left: 0;top: 0;li{// box-sizing: border-box;width: 50px;height: 50px;display:inline-block;margin-right: 20px;border: 1px solid #ccc;padding: 2px;img{width: 50px;height: 50px;float: left;}}}}}// 大图.bigImgBox{width: 400px;height: 400px;position: absolute;left: 420px;top: 0;border: 1px solid #ddd;overflow: hidden;img{width: 800px;height: 800px;}}}}.chooseWrap{width: 700px;// .clearFix();float: right;// position: absolute;.infoTop{h3{font-size: 14px;line-height: 21px;margin-top: 15px;// font-weight: 700;}>p{color: #e12228;margin-top: 15px;}}.priceWrap{margin-top: 10px;line-height: 28px;background-color: #fee9ec;padding: 7px;.priceTop{.clearFix();.title{margin-right: 15px;float: left;}.price{color: #cc1122;float: left;i{font-size: 16px;}em{font-size: 24px;font-weight: 700;}span{font-size: 12px;}}.remark{float: right;}}.priceBottom{.clearFix();.title{float: left;margin-right: 15px;}>div{width: 500px;// margin-top: 10px;line-height: 28px;float: left;i{background-color: #c81623;padding: 3px;color: #fff;}span{color: #999;}}}}.support{border-bottom: 1px solid #ededed;padding-bottom: 5px;>div{margin-top: 10px;line-height: 28px;.title{float: left;margin-right: 15px;}span{color: #999;}}}.choose{line-height: 28px;.choosed{// height: 30px;margin-top: 10px;mark{// height: 30px;background-color: snow;border: 1px solid #ddd;padding: 10px 20px;margin-right: 20px;a{color: red;margin-left: 20px;}}}.chooseArea{margin-top: 10px;// line-height: 28px;dl{margin: 13px 0;.clearFix();dt{margin-right: 15px;float: left;}dd{// border: 1px solid;margin-right: 5px;color: #666;line-height: 24px;padding: 2px 14px;border-top: 1px solid #eee;border-left:1px solid #eee;border-right:1px solid #bbb;border-bottom:1px solid #bbb;float: left;&:nth-of-type(1){color: red;}}}}.carWrap{.control{width: 55px;margin-right: 15px;// .clearFix();height: 39px;float: left;position: relative;input{width: 38px;height: 37px;border: 1px solid #ddd;color: #555;text-align: center;position: absolute;outline: none;}a{position: absolute;// float: left;display: block;width: 15px;height: 18px;background-color: #f1f1f1;text-align: center;line-height: 18px;color: #666;right: 0px;border: 1px solid #ddd;}a.minus{// right: -8px;top: 19px;// border-top: none;}}button{padding: 0 25px;height: 36px;// font-size: 16px;background-color: #e1251b;color: #fff;float: left;}}}}}// 商品详情区域.detialWrap{width: 1200px;margin: 30px auto 0;.clearFix();aside{width: 210px;border: 1px solid #ccc;// height: 400px;float: left;.tabBut{height: 40px;h4{width: 105px;// height: 40px;border-top: 1px solid #fff;border-bottom:1px #ccc solid;float: left;line-height: 37px;text-align: center;&.active{border-top:3px solid #e1251b;border-bottom: 1px solid #fff;}}}.tabContent{padding: 10px;.active{display: block;ul{.clearFix();li{width: 50%;border-bottom: 1px dashed #ededed;line-height: 28px;float: right;}}.imgList{li{margin: 5px 0 15px;border-bottom: 1px solid #ededed;width: 190px;// font-size: 0px;img{width: 152px;margin: 0 auto;}.productPrice{font-size: 16px;color: #c81623;// float: left;}.carbut{margin: 5px 0;text-align: center;a{border: 1px solid #8c8c8c;color: #8c8c8c;padding: 2px 14px;line-height: 18px;}}}}}>div{display: none;}}}.detail{width: 980px;float: right;.fitting{border: 1px solid #ddd;margin-bottom: 15px;>p{border: 1px solid #ddd;background-color: #f1f1f1;color: #333;padding: 5px 0 5px 15px;}.goods{height: 170px;padding-top: 10px;.phone{width: 127px;height: 165px;text-align: center;position: relative;float: left;img{width: 87px;margin: 0 auto;}span{color: #c81623;font-size: 16px;}i{position: absolute;top: 52px;right: -10px;font-size: 16px;}}.goodSuit{width: 668px;height: 165px;float: left;li{float: left;width: 127px;margin: 0 20px;text-align: center;img{width: 120px;height: 130px;}}}.buyList{float: left;border-left: 1px solid #ddd;width: 153px;height: 165px;padding-left: 20px;span{margin: 10px 0;}h4{margin-bottom: 10px;}>p{color: #B1191A;font-size: 16px;margin-bottom: 10px;}button{padding: 10px 25px;font-size: 16px;color: white;background-color:#e1251b;}}}}.intro{.butTitle{background-color: #ededed;.clearFix();li{float: left;border: 1px solid #ddd;background-color: #fff;height: 40px;line-height: 40px;padding: 0 11px;// text-align: center;}.goodsbut{background-color: #e1251b;>a{color: #fff;}}}.introContent{>div{display: none;}.active{display: block;ul{li{margin: 10px 0;}}}}}}}
JS
var goodData = {path: [{title: "手机、数码、通讯",url: "###"}, {title: "手机",url: "###"}, {title: "Apple苹果",url: "###"}, {title: "iphone 1000S系类",}],imagessrc: [// { b: "./images/b1.png", s: "./images/s1.png" },{b: "./images/b2.png", s: "./images/s2.png" },{b: "./images/b3.png", s: "./images/s3.png" },{b: "./images/b1.png", s: "./images/s1.png" },{b: "./images/b2.png", s: "./images/s2.png" },{b: "./images/b3.png", s: "./images/s3.png" },{b: "./images/b1.png", s: "./images/s1.png" },{b: "./images/b2.png", s: "./images/s2.png" },{b: "./images/b3.png", s: "./images/s3.png" },{b: "./images/b1.png", s: "./images/s1.png" },{b: "./images/b2.png", s: "./images/s2.png" },{b: "./images/b3.png", s: "./images/s3.png" },{b: "./images/b1.png", s: "./images/s1.png" },{b: "./images/b2.png", s: "./images/s2.png" }],goodsDetail: {title: "Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机bbb123",recommend: "推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返",price: 5299,promoteSales: {type: "加价购",content: "满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品"},support: "以旧换新，闲置手机回收 4G套餐超值抢 礼品购",address: "广东省 深圳市 宝安区",evaluateNum: 670000,crumbData: [{"title": "选择颜色","data": [{type: "金色",changePrice: 0},{type: "银色",changePrice: 40},{type: "黑色",changePrice: 90},]},{"title": "内存容量","data":[{type: "16G",changePrice: 0},{type: "64G",changePrice: 300},{type: "128G",changePrice: 900},{type: "256G",changePrice: 1300},]},{"title": "选择版本","data": [{type: "公开版",changePrice: 0},{type: "移动版",changePrice: -1000}]},{"title": "购买方式","data": [{type: "官方标配",changePrice: 0},{type: "优惠移动版",changePrice: -240},{type: "电信优惠版",changePrice: -390},]}]}}
<script type="text/javascript">window.onload = function(){var bigImgIndex = 0;// console.log(goodData);// 导航路径pathNav();function pathNav(){// 获取要得到的数据var path = goodData.path;// 获取要放入的父节点var pathNavNode = document.querySelector(".pathNav");// 遍历获取数据的数组for(var i=0;i<path.length;i++){// 创建一个新的a节点var aNode = document.createElement('a');// 如果获取的是最后一个节点，只获取他的title值if(i==path.length-1){aNode.innerHTML = path[i].title;pathNavNode.appendChild(aNode);}else{// 否则的话获取他的title值、url值，创建新的分隔节点/ 最后将他们加入路径导航aNode.innerHTML = path[i].title;aNode.href = path[i].url;pathNavNode.appendChild(aNode);var iNode = document.createElement('i') ;iNode.innerHTML ="/";pathNavNode.appendChild(iNode);}}}// 放大镜previw();function previw(){// 获取previwvar previwNode = document.querySelector('.mainCon .infoWrap .previw')// 获取zoomImgBoxvar zoomImgBox = document.querySelector('.mainCon .infoWrap .previw .zoomImgBox');// 定义maskNode变量，初始值为空var maskNode =null;var bigImgBoxNode = null;var bigImgNode = null;// 小图渲染// 获取图片数据var imagessrc = goodData.imagessrc;var smallImg = document.createElement('img');smallImg.src = imagessrc[0].s;zoomImgBox.appendChild(smallImg);//事件：鼠标移入zoomImgBox手机图片内，创建蒙版以及大图盒子 大图zoomImgBox.onmouseenter = function(){if(!maskNode){maskNode = document.createElement('div');maskNode.className = 'mask';zoomImgBox.appendChild(maskNode);bigImgBoxNode = document.createElement('div');bigImgBoxNode.className = 'bigImgBox';previwNode.appendChild(bigImgBoxNode);bigImgNode = document.createElement('img')bigImgNode.src = "images/b1.png";bigImgNode.src = imagessrc[bigImgIndex].b;bigImgBoxNode.appendChild(bigImgNode);}}// 事件：鼠标移动事件 确定鼠标坐标，根据鼠标坐标确定蒙版位置 根据蒙版位置确定大图尺寸zoomImgBox.onmousemove = function(event){event = event || window.left;// console.log("yidong");// 根据鼠标位置确定蒙版位置var maskPosition = {left:event.clientX - previwNode.getBoundingClientRect().left - maskNode.offsetWidth/2,top:event.clientY - previwNode.getBoundingClientRect().top - maskNode.offsetHeight/2}// 判断蒙版的边界条件if(maskPosition.left < 0){maskPosition.left = 0;}else if(maskPosition.left > previwNode.clientWidth - maskNode.offsetWidth){maskPosition.left = previwNode.clientWidth - maskNode.offsetWidth;}else if(maskPosition.top < 0){maskPosition.top = 0;}else if(maskPosition.top < previwNode.clientHeight - maskNode.offsetHeight){// maskPosition.top = previwNode.clientHeight - maskNode.offsetHeight;}// 根据蒙版的大小，确定大图的尺寸var sacle = (zoomImgBox.clientWidth - maskNode.offsetWidth)/(bigImgBoxNode.clientWidth - bigImgNode.offsetWidth);console.log(sacle);// 根据蒙版的位置和比例 确定大图的位置var bigImgPosition={left:maskPosition.left/sacle,top:maskPosition.top/sacle}bigImgNode.style.marginLeft = bigImgPosition.left + 'px';bigImgNode.style.marginTop = bigImgPosition.top + 'px';// 修改蒙版的位置maskNode.style.left = maskPosition.left + 'px';maskNode.style.top = maskPosition.top + 'px';}// 事件：鼠标移出事件 蒙版删除，大图盒子、大图删除zoomImgBox.onmouseleave = function(){zoomImgBox.removeChild(maskNode);previwNode.removeChild(bigImgBoxNode);// bigImgBoxNode.removeChild(bigImgNode);// 重置变量maskNode =null;bigImgBoxNode = null;bigImgNode = null;// zoomImgBox.onmouseenter = null;// zoomImgBox.onmousemove = null ;// zoomImgBox.onmouseleave =null;}}// 缩略图thumbnail();function thumbnail(){// 获取左右按钮var leftbut = document.querySelector('.mainCon .infoWrap .previw .thumbnail span.leftbut');var rightbut = document.querySelector('.mainCon .infoWrap .previw .thumbnail span.rightbut');// 获取图片列表var list = document.querySelector('.mainCon .infoWrap .previw .thumbnail .itemWrap ul');// 缩略图的动态渲染// 获取图片数据var imagessrc = goodData.imagessrc;// 遍历数组imagessrc.forEach(function(item){// 当前这个数组有多少个元素，就创建多少个li,并且在每一个li当中添加一个图片；// 当前图片的链接，就是 当前数组中每一个对象的s属性的值(item.s);// 创建li标签创建img标签，将li标签加入缩量的图片，将img加入li中var liNode = document.createElement('li');var imgNode = document.createElement('img');imgNode.src = item.s;liNode.appendChild(imgNode);list.appendChild(liNode);})var imgList = document.querySelectorAll('.mainCon .infoWrap .previw .thumbnail .itemWrap ul li');var showImg = 5;// 定义移动张数var moveImg = 2;// 每次移动两张，计算单次移动的偏移量、var moveLeft = moveImg * (imgList[0].offsetWidth +20);// console.log(moveLeft);// 记录总共可以移动的偏移量var countLeft = (imgList.length - showImg)*(imgList[0].offsetWidth +20);// 记录已经移动的偏移量var tempLeft = 0;// 点击左右箭头，移动图片// 点击左按钮，一次移动两张图片，// 移动距离为 当前移动的张数*(图片的宽度+一个marginRight)// 定义显示张数// rightbut();rightbut.onclick =function(){// 如果已经走过的距离，小于总共可以走的距离if(tempLeft < countLeft){// 如果要走的距离小于单次移动的距离if(moveLeft < countLeft - tempLeft){tempLeft += moveLeft;}else{tempLeft = countLeft;}}list.style.left = -tempLeft + 'px';}leftbut.onclick = function(){if(tempLeft>0){if(tempLeft > moveLeft){tempLeft -= moveLeft;}else{tempLeft = 0;}}list.style.left = -tempLeft + 'px';}}// 缩略图点击功能thumbnailClick();function thumbnailClick(){// 获取li标签var items = document.querySelectorAll('.mainCon .infoWrap .previw .thumbnail .itemWrap ul li');// 获取图片数据var imagessrc = goodData.imagessrc;// 获取小图var smallImg = document.querySelector('.mainCon .infoWrap .previw .zoomImgBox img');for(var i=0;i< items.length;i++){// 建立新的索引items[i].index = i;// 增加索引，是为了在点击事件中，判断当前点击的li的索引，然后取数组中找到索引对应的那个对象，然后将这个索引对应的s属性的对应链接 设置给小图items[i].onclick = function(){var imgSrc = imagessrc[this.index].s;smallImg.src = imgSrc;// items.appendChild(smallImg);// console.log(this.index);bigImgIndex = this.index;}}}// 商品信息数据渲染infoData();function infoData(){// 获取商品信息数据var infoTop = document.querySelector('.mainCon .chooseWrap .infoTop ');var goodsDetail = goodData.goodsDetail;var str = `<h3>${goodsDetail.title}</h3><p>${goodsDetail.recommend}</p><div class="priceWrap"><div class="priceTop"><p class="title">价 格</p><p class="price"><i>¥</i><em>${goodsDetail.price}</em><span>降价通知</span></p><p class="remark"><i>累计评价</i><span>${goodsDetail.evaluateNum}</span></p></div><div class="priceBottom"><p class="title">促 销</p><div><i>${goodsDetail.promoteSales.type}</i><span>${goodsDetail.promoteSales.content}</span></div></div></div><div class="support"><div><p class="title">支 持</p><span>${goodsDetail.support}</span></div><div><p class="title">配 送 至</p><span>${goodsDetail.address}</span></div></div>`infoTop.innerHTML = str;}// 选择区域渲染chooseArea();function chooseArea(){// 获取chooseArea容器var chooseArea = document.querySelector('.mainCon .chooseWrap .choose .chooseArea ');// console.log(chooseArea);// 获取数据var crumbData = goodData.goodsDetail.crumbData;// 遍历数组 创建选择的内容crumbData.forEach(function(item){// 创建dl容器var dlNode = document.createElement('dl');// 创建dtvar dtNode = document.createElement('dt');// 将每一个对象中的title的属性，作为dt的文本dtNode.innerHTML = item.title;dlNode.appendChild(dtNode);// 遍历每个对象的data，这里的item对应每一个对象的选项的文本item.data.forEach(function(item){// 创建ddvar ddNode = document.createElement('dd');ddNode.innerHTML = item.type;// dlNode.appendChild(ddNode);// 给每一个选项添加价钱改变的属性ddNode.setAttribute('changePrice',item.changePrice);dlNode.appendChild(ddNode);// console.log(ddNode);});chooseArea.appendChild(dlNode);// console.log(dlNode);})// console.log(chooseArea);}// 高亮切换// 获取dl容器var dlList = document.querySelectorAll('.mainCon .chooseWrap .choose .chooseArea dl');// 创建一个数组容器var arr = new Array(dlList.length);// console.log(dlList)arr.fill(0);// console.log(arr);// 事件 遍历dlList列表for(var i=0;i < dlList.length;i++){dlList[i].index = i;(function(){// 获取当前dl下的所有ddvar ddList = dlList[i].getElementsByTagName('dd');// 遍历当前ddfor(var j=0;j < ddList.length;j++){// ddList[j].style.color = '#666';// 为每一个dd绑定单击响应函数ddList[j].onclick = function(){// 高亮切换 清除高亮，将当前的这一组dd颜色设置为#666 for(var i=0;i<ddList.length;i++){ddList[i].style.color = '#666';// console.log('点击');}//将当前点击的这个dd(this)颜色设置为红色this.style.color ='red';// 根据当前点击dd的父元素的索引， 将当前dd的type和changePrice存在数组中arr[this.parentNode.index] = this;priceSum(arr);console.log(arr);// 创建筛选结果// 获取choosed容器var choosedNode = document.querySelector('.mainCon .chooseWrap .choose .choosed ');// 遍历数组容器，如果有内容，创建mark标签，将数组当前的内容放在mark中，创建a标签// 如果当前数组没有，则数组元素为0元素，隐式转换为falsechoosedNode.innerHTML = '';arr.forEach(function(item,index){// 每次需要清除样式if(item){// 创建mark标签var markNode = document.createElement('mark');markNode.innerHTML=item.innerHTML;choosedNode.appendChild(markNode);var aNode = document.createElement('a');aNode.innerHTML ='X';aNode.setAttribute('num',index);markNode.appendChild(aNode);// console.log(item);}// 获取a容器var aList = document.querySelectorAll('.mainCon .chooseWrap .choose .choosed mark a');// 删除逻辑// 遍历a集合，为每一个a绑定单击响应函数for(var i=0;i < aList.length;i++){aList[i].onclick = function(){// 删除mark标签choosedNode.removeChild(this.parentNode);// 修改高亮，将当前元素的高亮取消，将每一个的dl的第一个dd设置为高亮var index = this.getAttribute('num');arr[index] = 0;priceSum(arr);// console.log(arr);// 将当前索引的dl的dd都设置为#666，将第一个颜色设置为red// 获取当前索引的dl的ddvar ddList = dlList[index].getElementsByTagName('dd');// 遍历ddlistfor(var j = 0;j <ddList.length;j++){ddList[j].style.color = '#666';}ddList[0].style.color = 'red';}}});}}})();// 计算价格 价格函数访问不到数组，所以可以在筛选条件改变(数组内容改变)的地方直接调用 调用这个函数将数组传过来function priceSum(arr){// 获取原始价格// console.log(arr);var price = goodData.goodsDetail.price;// 获取价格容器var priceNode = document.querySelector('.mainCon .chooseWrap .priceWrap .priceTop .price em');arr.forEach(function(item){// 在这个循环中 item对应的是 传入数组当中存储的每一个dd元素// console.log(item);// console.log(item.getAttribute('changePrice'));if(item){price += parseInt(item.getAttribute('changePrice'));}// console.log(price);})priceNode.innerHTML = price;// 获取计算后的价格容器var detailPrice = document.querySelector('.detialWrap .detail .fitting .goods .phone span');// 获取四个搭配的价格容器var choosedbox = document.querySelectorAll('.detialWrap .detail .fitting .goods .goodSuit li label input');// 获取总价格的容器var buyPrice = document.querySelector('.detialWrap .detail .fitting .goods .buyList > p');detailPrice.innerHTML = "￥" + price;buyPrice.innerHTML = "￥" + price;}}// tab切换构造函数// 创建构造函数 这里两个参数为形参function Tab(tabButNode,tabContentNode){// 这里的this指的是t1实例 为这个实例创建了一个a属性，将自己的数据传入进去this.tabButNode = tabButNode;this.tabContentNode = tabContentNode;// 提前在外部用一个变量存储当前实例对象this,以防止内部函数this被占用时，所使用var _this = this;// 遍历按钮，为每一个按钮绑定单击响应函数 按下以后先取消按钮和内容区的active类名再为点击的按钮和她相应的内容区起名字activefor(var i=0;i<this.tabButNode.length;i++){this.tabButNode[i].index = i;// console.log(tabButNode[i]);this.tabButNode[i].onclick = function(){// 当前事件回调函数的作用域当中 有自己的this 指向当前事件源_this.tabClick(this);}}}// 点击按钮后，修改类名Tab.prototype.tabClick=function(btn){// console.log('点击');for (var i = 0; i < this.tabButNode.length; i++) {this.tabButNode[i].className = '';this.tabContentNode[i].className = '';}this.tabContentNode[btn.index].className = 'active';btn.className = 'active';}// tab侧边栏切换asideTab();function asideTab(){// 获取tabButvar tabButNode = document.querySelectorAll('.detialWrap aside .tabBut>h4');// 获取tabContentvar tabContentNode = document.querySelectorAll('.detialWrap aside .tabContent>div');// 调用构造函数 这里两个参数为实参// var t1 =new Tab(tabButNode,tabContentNode);new Tab(tabButNode,tabContentNode);}/* // 方法一asideTab();function asideTab(){// 获取tabButvar tabButNode = document.querySelectorAll('.detialWrap aside .tabBut>h4');// 获取tabContentvar tabContentNode = document.querySelectorAll('.detialWrap aside .tabContent>div');// 遍历按钮，为每一个按钮绑定单击响应函数 按下以后先取消按钮和内容区的active类名再为点击的按钮和她相应的内容区起名字activefor(var i=0;i<tabButNode.length;i++){tabButNode[i].index = i;// console.log(tabButNode[i]);tabButNode[i].onclick = function(){for(var i=0;i<tabButNode.length;i++){// 取消active类名tabButNode[i].className = '';tabContentNode[i].className = '';}this.className = 'active';tabContentNode[this.index].className = 'active';}}} */// tab商品详情切换detailTab();function detailTab(){// 获取详情页的tab按钮var tabButNode = document.querySelectorAll('.detialWrap .detail .intro .butTitle li');// 获取详情页内容var tabContentNode = document.querySelectorAll('.detialWrap .detail .intro .introContent > div');new Tab(tabButNode,tabContentNode);}// 搭配价格计算fittingPrice();function fittingPrice(){// 获取计算后的价格容器var detailPrice = document.querySelector('.detialWrap .detail .fitting .goods .phone span');// 获取四个搭配的价格容器var choosedbox = document.querySelectorAll('.detialWrap .detail .fitting .goods .goodSuit li label input');// 获取总价格的容器var buyPrice = document.querySelector('.detialWrap .detail .fitting .goods .buyList > p');// 事件:遍历搭配的复选框,为每一个复选框绑定勾选响应函数，如果勾选，将价格加入价格里面for(var i=0; i < choosedbox.length;i++){choosedbox[i].onclick = function(){var price = parseInt(detailPrice.innerHTML.substr(1));// 遍历所有的复选框，看看其是否被选中for(var i=0; i < choosedbox.length;i++){if(choosedbox[i].checked){price += parseInt(choosedbox[i].value)// console.log(price);}}buyPrice.innerHTML = "￥" + price;}}}}</script>
