jquery和carousel.min.js實現京東類似的輪播

原創 风灵使 2019-09-07 02:28
原文鏈接：https://blog.csdn.net/WuLex

頁面：

<!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);

結果如圖：

在這裏插入圖片描述
在這裏插入圖片描述
下載地址

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Jquery選擇器與樣式操作

风神修罗使 2020-03-11 23:59:33

Jquery的parent和closet方法

风神修罗使 2020-02-21 06:31:55

jquery鏈式操作

风神修罗使 2020-02-21 06:31:54

jquery.tmpl示例

风灵使 2019-09-02 17:15:00

jQuery-tmpl基於jQuery簡單實用的模板引擎

风灵使 2019-08-28 17:54:42

jQuery 選擇器

风灵使 2019-08-28 17:54:42

jQuery Validate 表單驗證插件----自定義校驗結果樣式

风灵使 2019-08-09 03:40:00

jQuery Validate自定義表單元素驗證通過和不通過的樣式

风灵使 2019-08-08 17:28:46

jquery validate的漂亮css樣式驗證

风灵使 2019-08-08 17:28:46

jquery高級 ajax

风灵使 2019-08-06 02:46:19

jquery ajax實例教程和一些高級用法

风灵使 2019-08-03 17:21:47

【JQUERY】ajax使用error調試錯誤的方法

风灵使 2019-08-03 17:21:47

JQuery中的bind()和unbind()的理解

风灵使 2019-08-02 17:24:38

Jquery操作複選框(CheckBox)的取值賦值實現代碼

风灵使 2019-08-02 17:24:38

Js/Jquery獲取input file的文件名

风灵使 2019-08-02 17:24:38