$(function() { //Three target pictures, add a click event $(".color_change ul li img").click(function () { //split splitter, split before and after var str = $(this). attr("src").split(".jpg"); //str[0] gets the character with index 0 after segmentation for splicing //Define the big picture in the upper left corner var img_small = str[0] + "_one_small" + " .jpg"; var img_big = str[0] + "_one_big" + ".jpg"; //In the event, get the current src and alt->display color //attr change the attribute value magnifying glass attribute "jqimg": img_big Get the big picture in the upper left corner "src": img_small $("#bigImg").attr({ "src": img_small, "jqimg": img_big }); //Enlarge image attributes $("#thickImg").attr("href", img_big);
//attr change (.imgList li:eq(0) img) attribute
// small image in the lower left corner
$(".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");
//Define and get the text attribute of the current picture color
var alt = $(this).attr("alt");
$(". color_change strong").text(alt);
//Determine whether the third picture exists
if (alt == "pink green") { $(".imgList li:eq(2) img").hide(); } else { $(".imgList li:eq(2) img").show();
}
})
//Click to enlarge the small picture at the bottom left
$(".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);
})
})
