页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品详情页</title>
<link rel="stylesheet" href="css/common.css" type="text/css"/>
<link rel="stylesheet" href="css/index.css" type="text/css"/>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<div class="main">
<!--mainCenter-->
<div class="mainCenter">
<div class="goodsMain">
<div class="goodsMainLeft">
<div class="large_box">
<ul>
<li>
<img src="images/vv.jpg">
</li>
<li>
<img src="images/tvbig2.jpg">
</li>
<li>
<img src="images/tvbig3.jpg">
</li>
<li>
<img src="images/tvbig4.jpg">
</li>
<li>
<img src="images/tvbig5.jpg">
</li>
<li>
<img src="images/tvbig1.jpg">
</li>
</ul>
</div>
<div class="small_box">
<span class="btn left_btn"></span>
<div class="small_list">
<ul>
<li class="on">
<div><img src="images/Smallvv.jpg"></div>
</li>
<li>
<div><img src="images/tvSmall2.jpg"></div>
</li>
<li>
<div><img src="images/tvSmall3.jpg"></div>
</li>
<li>
<div><img src="images/tvSmall4.jpg"></div>
</li>
<li>
<div><img src="images/tvSmall5.jpg"></div>
</li>
<li>
<div><img src="images/tvSmall1.jpg"></div>
</li>
</ul>
</div>
<span class="btn right_btn"></span>
</div>
</div>
<div class="goodsMainRight">
</div>
</div>
</div>
<!--mainCenter end-->
</div>
<script src="js/carousel.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
/* 商品轮播图(带缩略图的轮播效果) */
$(".goodsMainLeft").thumbnailImg({
large_elem: ".large_box",
small_elem: ".small_list",
left_btn: ".left_btn",
right_btn: ".right_btn"
});
});
</script>
<script>
var $skuUL=$(".itemsRight ul");
$skuUL.each(function(index){
var $pi=$(this).attr("pid");
var $thisChild=$(this).children("");
$thisChild.each(function(){
var $this_vid=$(this).attr("vid");
var $attr_id=$pi+":"+$this_vid;
$(this).attr("attr_id",$attr_id);
});
});
var data={
"1:1;2:4": {
"price": 1515.55,
"count": 1,
"skuid": 33,
"tag_str": "1:颜色;1:玫瑰金|2:尺寸;4:40英寸"
},
"1:1;2:5": {
"price": 1525.55,
"count": 1,
"skuid": 34,
"tag_str": "1:颜色;1:玫瑰金|2:尺寸;5:42英寸"
},
"1:1;2:6": {
"price": 1535.55,
"count": 1,
"skuid": 35,
"tag_str": "1:颜色;1:玫瑰金|2:尺寸;6:50英寸"
},
"1:1;2:7": {
"price": 1545.55,
"count": 1,
"skuid": 36,
"tag_str": "1:颜色;1:玫瑰金|2:尺寸;7:52英寸"
},
"1:2;2:4": {
"price": 1525.55,
"count": 3,
"skuid": 37,
"tag_str": "1:颜色;2:黑色|2:尺寸;4:40英寸"
},
"1:2;2:5": {
"price": 1555.55,
"count": 4,
"skuid": 38,
"tag_str": "1:颜色;2:黑色|2:尺寸;5:42英寸"
},
"1:2;2:6": {
"price": 1565.55,
"count": 5,
"skuid": 39,
"tag_str": "1:颜色;2:黑色|2:尺寸;6:50英寸"
},
"1:2;2:7": {
"price": 1575.55,
"count": 6,
"skuid": 40,
"tag_str": "1:颜色;2:黑色|2:尺寸;7:52英寸"
}
};
//保存最后的组合结果信息
var SKUResult = {};
function getObjKeys(obj) {
if (obj !== Object(obj)) throw new TypeError('Invalid object');
var keys = [];
for (var key in obj)
if (Object.prototype.hasOwnProperty.call(obj, key))
keys[keys.length] = key;
var $thisPrice=data[keys[0]].price;
$("#price").html($thisPrice);
var a=keys[0].split(";");
$skuUL.children().each(function(){
if($(this).attr("attr_id")==a[0]){
$(this).addClass("choose");
}else if($(this).attr("attr_id")==a[1]){
$(this).addClass("choose");
}
});
return keys;
}
//把组合的key放入结果集SKUResult
function add2SKUResult(combArrItem, sku) {
var key = combArrItem.join(";");
if(SKUResult[key]) {//SKU信息key属性·
SKUResult[key].count += sku.count;
SKUResult[key].prices.push(sku.price);
} else {
SKUResult[key] = {
count : sku.count,
prices : [sku.price]
};
}
}
//初始化得到结果集
function initSKU() {
var i, j, skuKeys = getObjKeys(data);
for(i = 0; i < skuKeys.length; i++) {
var skuKey = skuKeys[i];//一条SKU信息key
var sku = data[skuKey]; //一条SKU信息value
var skuKeyAttrs = skuKey.split(";"); //SKU信息key属性值数组
skuKeyAttrs.sort(function(value1, value2) {
return parseInt(value1) - parseInt(value2);
});
//对每个SKU信息key属性值进行拆分组合
var combArr = combInArray(skuKeyAttrs);
for(j = 0; j < combArr.length; j++) {
add2SKUResult(combArr[j], sku);
}
//结果集接放入SKUResult
SKUResult[skuKeyAttrs.join(";")] = {
count:sku.count,
prices:[sku.price]
}
}
}
/**
* 从数组中生成指定长度的组合
* 方法: 先生成[0,1...]形式的数组, 然后根据0,1从原数组取元素,得到组合数组
*/
function combInArray(aData) {
if(!aData || !aData.length) {
return [];
}
var len = aData.length;
var aResult = [];
for(var n = 1; n < len; n++) {
var aaFlags = getCombFlags(len, n);
while(aaFlags.length) {
var aFlag = aaFlags.shift();
var aComb = [];
for(var i = 0; i < len; i++) {
aFlag[i] && aComb.push(aData[i]);
}
aResult.push(aComb);
}
}
return aResult;
}
/**
* 得到从 m 元素中取 n 元素的所有组合
* 结果为[0,1...]形式的数组, 1表示选中,0表示不选
*/
function getCombFlags(m, n) {
if(!n || n < 1) {
return [];
}
var aResult = [];
var aFlag = [];
var bNext = true;
var i, j, iCnt1;
for (i = 0; i < m; i++) {
aFlag[i] = i < n ? 1 : 0;
}
aResult.push(aFlag.concat());
while (bNext) {
iCnt1 = 0;
for (i = 0; i < m - 1; i++) {
if (aFlag[i] == 1 && aFlag[i+1] == 0) {
for(j = 0; j < i; j++) {
aFlag[j] = j < iCnt1 ? 1 : 0;
}
aFlag[i] = 0;
aFlag[i+1] = 1;
var aTmp = aFlag.concat();
aResult.push(aTmp);
if(aTmp.slice(-n).join("").indexOf('0') == -1) {
bNext = false;
}
break;
}
aFlag[i] == 1 && iCnt1++;
}
}
return aResult;
}
//初始化用户选择事件
$(function() {
initSKU();
$('.sku').each(function() {
var self = $(this);
var attr_id = self.attr('attr_id');
if(!SKUResult[attr_id]) {
self.addClass("disable");
}
}).click(function() {
var self = $(this);
if(self.hasClass("disable")){
return false;
}
//选中自己,兄弟节点取消选中
self.addClass('choose').siblings().removeClass('choose');
//已经选择的节点
var selectedObjs = $('.choose');
if(selectedObjs.length) {
//获得组合key价格
var selectedIds = [];
selectedObjs.each(function() {
selectedIds.push($(this).attr('attr_id'));
});
selectedIds.sort(function(value1, value2) {
return parseInt(value1) - parseInt(value2);
});
var len = selectedIds.length;
var prices = SKUResult[selectedIds.join(';')].prices;
var maxPrice = Math.max.apply(Math, prices);
var minPrice = Math.min.apply(Math, prices);
$('#price').text(maxPrice > minPrice ? minPrice + "-" + maxPrice : maxPrice);
//用已选中的节点验证待测试节点 underTestObjs
$(".sku").not(selectedObjs).not(self).each(function() {
var siblingsSelectedObj = $(this).siblings('.choose');
var testAttrIds = [];//从选中节点中去掉选中的兄弟节点
if(siblingsSelectedObj.length) {
var siblingsSelectedObjId = siblingsSelectedObj.attr('attr_id');
for(var i = 0; i < len; i++) {
(selectedIds[i] != siblingsSelectedObjId) && testAttrIds.push(selectedIds[i]);
}
} else {
testAttrIds = selectedIds.concat();
}
testAttrIds = testAttrIds.concat($(this).attr('attr_id'));
testAttrIds.sort(function(value1, value2) {
return parseInt(value1) - parseInt(value2);
});
if(!SKUResult[testAttrIds.join(';')]) {
$(this).addClass("disable").removeClass('choose');
} else {
$(this).removeClass('disable');
}
});
} else {
//设置默认价格
$('#price').text('--');
//设置属性状态
$('.sku').each(function() {
SKUResult[$(this).attr('attr_id')] ? $(this).removeClass('disable') : $(this).addClass('disable').removeClass('choose');
})
}
});
});
</script>
</body>
</html>
carousel.min.js
(function($){
//默认参数
var defaluts = {
large_elem: "large_elem", //大图
small_elem: "small_elem", //小图
left_btn: "left_btn", //左按钮
right_btn: "right_btn" , //右按钮
state: "on", // 类
speed: "normal", //速度
vis: 4 //项数
};
$.fn.extend({
/* 带缩略图的轮播效果 */
"thumbnailImg": function (options) {
var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
//遍历匹配元素的集合
return this.each(function () {
var $this = $(this);
var t = 0;
/* 初始化 */
$(opts.large_elem).find("ul li").eq(0).show();
$(opts.small_elem).find("ul li").eq(0).addClass(opts.state);
var l = $(opts.small_elem).find("ul li").length;
var l_mean;
if(l < opts.vis){
l_mean = 0;
}else{
l_mean = ((parseInt(l / opts.vis) - 1) * opts.vis) + (l % opts.vis);
}
var w = $(opts.small_elem).find("ul li").outerWidth(true); //缩略图项的宽度(包含内边距)
$(opts.small_elem).find("ul").css("width",l * w + "px"); //初始化缩略图总宽度
/* 缩略图点击 */
$(opts.small_elem).find("ul li").click(function(){
$(this).addClass(opts.state).siblings().removeClass(opts.state);
t = $(this).index();
Img($(this).index());
});
/* 左按钮 */
$(opts.left_btn).click(function(){
var i;
$(opts.small_elem).find("ul li").each(function(index){
if($(this).hasClass(opts.state)){
i = index;
}
});
i--;
if(i < 0){
i = l - 1;
}
t = i;
Img(i)
});
/* 右按钮 */
$(opts.right_btn).click(function(){
var i;
$(opts.small_elem).find("ul li").each(function(index){
if($(this).hasClass(opts.state)){
i = index;
}
});
i++;
if(i > l-1){
i = 0;
}
t = i;
Img(i);
});
/* 图片 */
function Img(i){
$(opts.large_elem).find("ul li").eq(i).fadeIn().siblings().hide();
$(opts.small_elem).find("ul li").eq(i).addClass(opts.state).siblings().removeClass(opts.state);
var ml = i * w;
if(ml <= l_mean * w){
$(opts.small_elem).find("ul").stop().animate({
marginLeft: -ml + "px"
},opts.speed)
}else{
$(opts.small_elem).find("ul").stop().animate({
marginLeft: -(l_mean * w) + "px"
},opts.speed)
}
}
// var timing = setInterval(function(){
// t++;
// if(t > l-1){
// t = 0;
// }
// Img(t)
// },3000);
// $this.hover(function(){
// clearInterval(timing);
// },function(){
// timing = setInterval(function(){
// t++;
// if(t > l-1){
// t = 0;
// }
// Img(t)
// },3000);
// });
});
}
});
})(jQuery);
结果如图:
下载地址