版权声明：转载请注明出处：http://blog.csdn.net/Guobeibei_123 https://blog.csdn.net/Guobeibei_123/article/details/80903551
服装商城的信息图片
HTML代码部分
<div class="pro_detail">
<div class="pro_detail_left">
<div class="jqzoom"><img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg" /></div>
<span>
<a href="images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" class="thickbox">
<img alt="点击看大图" src="images/look.gif" />
</a>
</span>
<ul class="imgList">
<li><img src="images/pro_img/blue_one.jpg" alt="" /></li>
<li><img src="images/pro_img/blue_two.jpg" alt="" /></li>
<li><img src="images/pro_img/blue_three.jpg" alt="" /></li>
</ul>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">产品属性</li>
<li>产品尺码表</li>
<li>产品介绍</li>
</ul>
</div>
<div class="tab_box">
<div>
沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。
</div>
<div class="hide">
来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，以直筒明门襟的经典造型、配合圆袋、曲摆的现代人性化裁减，相得益彰，浑然天成。色彩明快的纯色衬衫简洁、自然、为您营造出利落、爽朗的形象，透出热情、优雅的个性；精选白、蓝、淡粉、宽条纹、英国格等10余种明亮、经典花型，色彩缤纷呈现，以适合本季着装，更显自然、舒适境界。
</div>
<div class="hide">
世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。
</div>
</div>
</div>
</div>
<div class="pro_detail_right">
<h4>免烫高支棉条纹衬衣</h4>
<p>全新精品高支棉衬衫再次提升品质，精选100%新疆长绒棉织造而成，平整度好，短绒少； 80-100高支双股经纬交织，带来无与伦比的舒适享受；而且面料反光效果好，具有漂亮的光泽，质感上佳，有利于免烫效果的维持。※不仅如此，深受消费者欢迎的经典款式使精品高支棉衬衫更贴合东方人身型气质，多款衬衫还采用简单且个性鲜明条纹元素，利用最为单纯的几何线条，透过条纹的粗细、宽窄间的重组，带出令人耳目一新的时尚气息，更显出俊朗男士的挺拔身型！</p>
<p><strong>现价：200元 <del>原价：300元</del></strong></p>
<p><strong>编号：33313993</strong></p>
<div class="color_change">
颜色：<strong>蓝白</strong>
<ul>
<li><img src="images/pro_img/blue.jpg" alt="蓝白" /></li>
<li><img src="images/pro_img/yellow.jpg" alt="黄白" /></li>
<li><img src="images/pro_img/green.jpg" alt="粉绿" /></li>
</ul>
</div>左侧图片与右侧图片的效果：
js代码部分
$(funtion(){
//左侧小图点击
//小图的图片li img点击事件
//live:jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
//live进行绑定事件
$(".pro_detail_left ul li img").live("click",function () {
//获取图片的src属性
var Src = $(this).attr("src");
//获取图片的最后的属性
//lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
var img_i = Src.lastIndexOf(".");
//substring() 方法用于提取字符串中介于两个指定下标之间的字符。
var src_unit = Src.substring(img_i);
var Src = Src.substring(0, img_i);
//小图片的同辈级
var small = Src + "_small" + src_unit;
//大图片的同辈级
//attr:获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性
var big = Src + "_big" + src_unit;
$("#bigImg").attr({ "src": small, "jqimg": big });
$("#thickImg").attr("href", big);
});
//右侧产品衣服颜色切换
//div的img点击事件
$(".color_change ul li img").click(function () {
//当前图片的src
var img_src = $(this).attr("src");
//图片的最后元素
var i = img_src.lastIndexOf(".");
//元素的同辈
var unit = img_src.substring(i);
//元素的同辈从零开始
var img_src = img_src.substring(0, i);
//放大镜的图片
var img_small = img_src + "_one_small" + unit;
var img_big = img_src + "_one_big" + unit;
//放大镜图片
$("#bigImg").attr({ "src": img_small, "jqimg": img_big });
//放大图片
$("#thickImg").attr("href", img_big);
//div的颜色文字选择
$(".color_change strong").text($(this).attr("alt"));
var url = img_src + ".html";
//empty():删除匹配的元素集合中所有的子节点。
//load():载入远程 HTML 文件代码并插入至 DOM 中
$(".imgList").empty().load(url);
});
});$(funtion(){
//产品属性隐藏切换
//获取li的产品属性
var $product = $(".tab_menu ul li");
//li产品属性的点击事件
$product.click(function () {
//siblings():取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
//为当前事件获取一个追加class的属性并获取同辈元素之后移出class属性
$(this).addClass("selected").siblings().removeClass("selected");
//获取当前事件的索引
var index = $product.index(this);
//>:匹配所有紧接在 prev 元素后的 next 元素
//获取文字class的下一个div元素所有同辈级元素，显示隐藏
$(".tab_box>div").eq(index).show().siblings().hide();
//鼠标移上去颜色的hover
}).hover(function () {
$(this).addClass("hover");
}, function () {
$(this).removeClass("hover");
});
});产品属性隐藏切换图片的效果：
