html
<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>
jq
//切换图片颜色
$(function(){
$(".color_change>ul>li>img").click(function(){
//三个目标图片，添加单击事件
var src= $(this).attr("src");
var alt= $(this).attr("alt");
// alert("完整地址alt"+alt);
var a=src.split("img/");
// alert("截取一次a"+a);
var b =a[1].split(".jpg");
// alert("颜色"+b[0]);
//更换大图片
$(".jqzoom>img").attr("a","images/pro_img/"+b[0]+"_one_small.jpg");
$(".jqzoom>img").attr("jqimg","images/pro_img/"+b[0]+"_one_big.jpg");
//更换字体
$("color_change:first strong").html(b);
//更换下面三张小图片
//原来图片地址 替换为当前地址
$(".imgList li img:eq(0)").attr("src","images/pro_img/" + b[0] + "_one.jpg");
$(".imgList li img:eq(1)").attr("src","images/pro_img/" + b[0] + "_two.jpg");
$(".imgList li img:eq(2)").attr("src","images/pro_img/" + b[0] + "_three.jpg");
//绿色只有两张，如果是绿色，把第三个图片隐藏
if(b[0]=="green"){
$(".imgList li img:eq(2)").hide();
} else {
$(".imgList li img:eq(2)").show();
}
})
})
原图：
效果如下
购物车
jq
//购物车
$(function(){
var $product = $(".pro_detail_right");
$("#cart a").click(function(){
var pro_name = $product.find("h4:first").text();
var pro_size = $product.find(".pro_size strong").text();
var pro_color = $(".color_change strong").text();
var pro_num = $product.find("#num_sort").val();
var pro_price = $product.find(".pro_price span").text();
var dialog = " 感谢您的购买。\n您购买的\n"+
"产品是："+pro_name+"；\n"+
"尺寸是："+pro_size+"；\n"+
"颜色是："+pro_color+"；\n"+
"数量是："+pro_num+"；\n"+
"总价是："+pro_price +"元。";
if( confirm(dialog) ){
alert("您已经下单!");
}
return false;//避免页面跳转
})
})
HTML
// //购物车
// $(function(){
// var $product = $(".pro_detail_right");
// $("#cart a").click(function(){
// var pro_name = $product.find("h4:first").text();
// var pro_size = $product.find(".pro_size strong").text();
// var pro_color = $(".color_change strong").text();
// var pro_num = $product.find("#num_sort").val();
// var pro_price = $product.find(".pro_price span").text();
// var dialog = " 感谢您的购买。\n您购买的\n"+
// "产品是："+pro_name+"；\n"+
// "尺寸是："+pro_size+"；\n"+
// "颜色是："+pro_color+"；\n"+
// "数量是："+pro_num+"；\n"+
// "总价是："+pro_price +"元。";
// if( confirm(dialog) ){
// alert("您已经下单!");
// }
// return false;//避免页面跳转
// })
// })
html
<body>
<!--头部开始-->
<div id="header">
<a id="logo" href="#">Jane Shopping</a>
<ul id="skin">
<li id="skin_0" title="蓝色" class="selected">蓝色</li>
<li id="skin_1" title="紫色">紫色</li>
<li id="skin_2" title="红色">红色</li>
<li id="skin_3" title="天蓝色">天蓝色</li>
<li id="skin_4" title="橙色">橙色</li>
<li id="skin_5" title="淡绿色">淡绿色</li>
</ul>
</div>
<!--头部结束-->
<!--导航开始-->
<div id="navigation">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">衬 衫</a>
<ul>
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">长袖衬衫</a></li>
<li><a href="#">无袖衬衫</a></li>
</ul>
</li>
<li><a href="#">卫 衣</a>
<ul>
<li><a href="#">开襟卫衣</a></li>
<li><a href="#">套头卫衣</a></li>
</ul>
</li>
<li><a href="#">裤 子</a>
<ul>
<li><a href="#">休闲裤</a></li>
<li><a href="#">卡其裤</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">短裤</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<!--导航结束-->
<!--主体内容开始-->
<div id="content" class="global_module">
<h3>商品信息</h3>
<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>
<div class="pro_size">
尺寸：<strong>未选择</strong>
<ul>
<li><span>S</span></li>
<li><span>L</span></li>
<li><span>SL</span></li>
<li><span>LL</span></li>
</ul>
</div>
<div class="pro_num">
数量：
<select id="num_sort" style="width:40px;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="pro_price">
总计：<span>200</span>元
</div>
<div class="pro_rating">
给商品评分：
<ul class="rating nostar">
<li class="one">
<a href="#" title="1分">1
</a>
</li>
<li class="two">
<a href="#" title="2分">2</a>
</li>
<li class="three">
<a href="#" title="3分">3</a>
</li>
<li class="four">
<a href="#" title="4分">4</a>
</li>
<li class="five">
<a href="#" title="5分">5
</a>
</li>
</ul>
</div>
<div id="cart">
<a href="#">
<img src="images/btn_cart.png" />
</a>
</div>
</div>
</div>
</div>
<!--主体内容结束-->
</body>
1214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
