图片的点击放大
$(function() {
//三个目标图片,添加单击事件
$(".color_change ul li img").click(function () {
//split分割符,前后分割
var str = $(this).attr("src").split(".jpg");
//str[0]获取分割后索引0的字符进行拼接
//定义左上角大图片
var img_small = str[0] + "_one_small" + ".jpg";
var img_big = str[0] + "_one_big" + ".jpg";
//在事件内,获取当前的src和alt->显示颜色
//attr改变属性值 放大镜属性"jqimg": img_big 获取左上角大图片"src": img_small
$("#bigImg").attr({ "src": img_small, "jqimg": img_big });
//放大图片属性
$("#thickImg").attr("href", img_big);
//attr改变(.imgList li:eq(0) img)属性
//左下角小图
$(".imgList li:eq(0) img").attr("src", str[0] + "_one.jpg");
$(".imgList li:eq(1) img").attr("src", str[0] + "_two.jpg");
$(".imgList li:eq(2) img").attr("src", str[0] + "_three.jpg");
//定义并获取当前图片颜色text属性
var alt = $(this).attr("alt");
$(".color_change strong").text(alt);
//判断第三张图片是否存在
if (alt == "粉绿") {
$(".imgList li:eq(2) img").hide();
}
else {
$(".imgList li:eq(2) img").show();
}
})
//左下方小图点击放大
$(".imgList li img").click(function () {
//获取当前图片并分割字符
var strArray = $(this).attr("src").split('.jpg');
var imgSrc_small = strArray[0] + "_small" + ".jpg";
var imgSrc_big = strArray[0] + "_big" + ".jpg";
$("#bigImg").attr({ "src": imgSrc_small, "jqimg": imgSrc_big });
$("#thickImg").attr("href", imgSrc_big);
})
})