仿淘宝图片放大以及颜色切换

首先图片放大引用一个jquery jqzoom文件
然后在jquery里面写：

$(function(){
				$(".jqzoom").jqueryzoom({
					xzoom:300,
					yzoom:300,
					offset:10,
					position:"right",
					preload:1,
				})
			})

效果图如下：

星级滑动评分：

$(function() {
				$(".rating li a").click(function() {
					var title = $(this).attr("title");
					alert("你给出的评分是" + title);
					var cl = $(this).parent().attr("class");
					$(this).parent().parent().removeClass().addClass("rating  " + cl + "star");
				});
			});

效果图：

然后就是点击商品图片改变物品颜色：

$(function() {
				$(".color_change>ul>li>img").click(function() {
					var a = $(this).attr("src");
					var color = $(this).attr("alt");
					/*alert(color);*/
					var src = a.split("img/");
					/*alert(src[1]);*/
					var b = src[1].split(".jpg");
					/*alert(b[0]);*/

					//更换大图
					$(".jqzoom>img").attr("src", "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(color);

					//更换下面三张图片
					$(".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();
					}

				})
			})

点击小图更换大图：