jquery和carousel.min.js实现京东类似的轮播

痛定思痛。 2021-07-05 01:29 325阅读 0赞

页面：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>商品详情页</title>
  6.     <link rel="stylesheet" href="css/common.css" type="text/css"/>
  7.     <link rel="stylesheet" href="css/index.css" type="text/css"/>
  8.     <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
  9.     <script src="js/index.js" type="text/javascript"></script>
  11. </head>
  12. <body>
  13. <div class="main">
  14.     <!--mainCenter-->
  15.     <div class="mainCenter">
  16.         <div class="goodsMain">
  17.             <div class="goodsMainLeft">
  18.                 <div class="large_box">
  19.                     <ul>
  20.                         <li>
  21.                             <img src="images/vv.jpg">
  22.                         </li>
  23.                         <li>
  24.                             <img src="images/tvbig2.jpg">
  25.                         </li>
  26.                         <li>
  27.                             <img src="images/tvbig3.jpg">
  28.                         </li>
  29.                         <li>
  30.                             <img src="images/tvbig4.jpg">
  31.                         </li>
  32.                         <li>
  33.                             <img src="images/tvbig5.jpg">
  34.                         </li>
  35.                         <li>
  36.                             <img src="images/tvbig1.jpg">
  37.                         </li>
  38.                     </ul>
  39.                 </div>
  40.                 <div class="small_box">
  41.                     <span class="btn left_btn"></span>
  42.                     <div class="small_list">
  43.                         <ul>
  44.                             <li class="on">
  45.                                 <div><img src="images/Smallvv.jpg"></div>
  46.                             </li>
  47.                             <li>
  48.                                 <div><img src="images/tvSmall2.jpg"></div>
  49.                             </li>
  50.                             <li>
  51.                                 <div><img src="images/tvSmall3.jpg"></div>
  52.                             </li>
  53.                             <li>
  54.                                 <div><img src="images/tvSmall4.jpg"></div>
  55.                             </li>
  56.                             <li>
  57.                                 <div><img src="images/tvSmall5.jpg"></div>
  58.                             </li>
  59.                             <li>
  60.                                 <div><img src="images/tvSmall1.jpg"></div>
  61.                             </li>
  62.                         </ul>
  63.                     </div>
  64.                     <span class="btn right_btn"></span>
  65.                 </div>
  66.             </div>
  67.             <div class="goodsMainRight">
  68.             </div>
  69.         </div>
  70.     </div>
  71.     <!--mainCenter end-->
  72. </div>
  75. <script src="js/carousel.min.js" type="text/javascript"></script>
  76. <script type="text/javascript"> $(function(){ /* 商品轮播图（带缩略图的轮播效果） */ $(".goodsMainLeft").thumbnailImg({ large_elem: ".large_box", small_elem: ".small_list", left_btn: ".left_btn", right_btn: ".right_btn" }); }); </script>
  77. <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>
  78. </body>
  79. </html>
  1. (function($){ 
  2.     //默认参数
  3.     var defaluts = { 
  4.         large_elem: "large_elem",     //大图
  5.         small_elem: "small_elem",    //小图
  6.         left_btn: "left_btn",        //左按钮
  7.         right_btn: "right_btn" ,    //右按钮
  8.         state: "on",                 // 类
  9.         speed: "normal",             //速度
  10.         vis: 4                        //项数
  11.     };
  12.     $.fn.extend({ 
  13.         /* 带缩略图的轮播效果 */
  14.         "thumbnailImg": function (options) { 
  15.             var opts = $.extend({ }, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
  16.             //遍历匹配元素的集合
  17.             return this.each(function () { 
  18.                 var $this = $(this);
  19.                 var t = 0;
  20.                 /* 初始化 */
  21.                 $(opts.large_elem).find("ul li").eq(0).show();
  22.                 $(opts.small_elem).find("ul li").eq(0).addClass(opts.state);
  23.                 var l = $(opts.small_elem).find("ul li").length;
  24.                 var l_mean;
  25.                 if(l < opts.vis){ 
  26.                     l_mean = 0;
  27.                 }else{ 
  28.                     l_mean = ((parseInt(l / opts.vis) - 1) * opts.vis) + (l % opts.vis);
  29.                 }
  30.                 var w = $(opts.small_elem).find("ul li").outerWidth(true);  //缩略图项的宽度（包含内边距）
  31.                 $(opts.small_elem).find("ul").css("width",l * w + "px");    //初始化缩略图总宽度
  32.                 /* 缩略图点击 */
  33.                 $(opts.small_elem).find("ul li").click(function(){ 
  34.                     $(this).addClass(opts.state).siblings().removeClass(opts.state);
  35.                     t = $(this).index();
  36.                     Img($(this).index());
  37.                 });
  38.                 /* 左按钮 */
  39.                 $(opts.left_btn).click(function(){ 
  40.                     var i;
  41.                     $(opts.small_elem).find("ul li").each(function(index){ 
  42.                         if($(this).hasClass(opts.state)){ 
  43.                             i = index;
  44.                         }
  45.                     });
  46.                     i--;
  47.                     if(i < 0){ 
  48.                         i = l - 1;
  49.                     }
  50.                     t = i;
  51.                     Img(i)
  52.                 });
  53.                 /* 右按钮 */
  54.                 $(opts.right_btn).click(function(){ 
  55.                     var i;
  56.                     $(opts.small_elem).find("ul li").each(function(index){ 
  57.                         if($(this).hasClass(opts.state)){ 
  58.                             i = index;
  59.                         }
  60.                     });
  61.                     i++;
  62.                     if(i > l-1){ 
  63.                         i = 0;
  64.                     }
  65.                     t = i;
  66.                     Img(i);
  67.                 });
  68.                 /* 图片 */
  69.                 function Img(i){ 
  70.                     $(opts.large_elem).find("ul li").eq(i).fadeIn().siblings().hide();
  71.                     $(opts.small_elem).find("ul li").eq(i).addClass(opts.state).siblings().removeClass(opts.state);
  72.                     var ml = i * w;
  73.                     if(ml <= l_mean * w){ 
  74.                         $(opts.small_elem).find("ul").stop().animate({ 
  75.                             marginLeft: -ml + "px"
  76.                         },opts.speed)
  77.                     }else{ 
  78.                         $(opts.small_elem).find("ul").stop().animate({ 
  79.                             marginLeft: -(l_mean * w) + "px"
  80.                         },opts.speed)
  81.                     }
  82.                 }
  83.                 // var timing = setInterval(function(){ 
  84.                 // t++;
  85.                 // if(t > l-1){ 
  86.                 // t = 0;
  87.                 // }
  88.                 // Img(t)
  89.                 // },3000);
  90.                 // $this.hover(function(){ 
  91.                 // clearInterval(timing);
  92.                 // },function(){ 
  93.                 // timing = setInterval(function(){ 
  94.                 // t++;
  95.                 // if(t > l-1){ 
  96.                 // t = 0;
  97.                 // }
  98.                 // Img(t)
  99.                 // },3000);
  100.                 // });
  101.             });
  102.         }
  103.     });
  104. })(jQuery);

结果如图：

在这里插入图片描述
在这里插入图片描述
下载地址

发表评论

表情：
评论列表 （有 0 条评论，325人围观）

还没有评论，来说两句吧...

相关阅读

    相关 jQuery实现轮播图

    我之前用css3实现轮播图过，不过那是一个简单的轮播图，只能来回切换图片。因为那时候我还没有学过javascript，没学过javascript的同学也可以去我主页看看。当然，

    梦里梦外;梦里梦外;/ 0 赞/ 359 阅读

    相关 jQuery 实现图片轮播

         自从学习jQuery之后，简直怀疑人生了。      因为，用JavaScript原生代码实现一个效果可能得用几十行代码甚至更多，而用jQuery简单的几行就轻松搞

    忘是亡心i忘是亡心i/ 0 赞/ 439 阅读