http://conchventure.com/Public/En/js/mc_util.js

1(function (window) {
2    var mc = {};
3    if (window.mc) {
4        mc = window.mc
5    }
6
7    /**
8     * @description 将列表等分排列
9     * 
10     * @param {Document} $obj - jQuery dom对象
11     * @param {number} column - 列数
12     * @param {number} space - 左右留白
13     */
14    mc.list = function ($obj, column, space) {
15        $obj.children().css({
16            float: "left",
17            width: Math.floor(100 / column) + "%",
18            paddingLeft: space,
19            paddingRight: space
20        })
21        $obj.css({
22            marginLeft: -space,
23            marginRight: -space
24        })
25    }
26    /**
27     * @description 数字滚动 需引入appear.js 并在元素上加上data-num属性
28     *
29     * @param {Document} $obj - jQuery dom对象
30     */
31    mc.numRoll = function ($obj) {
32        // 数字滚动
33        $obj.appear(function () {
34            var content = $(this).text();
35            var counter = parseInt($(this).text().replace(/,/g, ""));
36            $(this).countTo({
37                from: 1,
38                to: counter,
39                speed: 1500,
40                refreshInterval: 60,
41                onComplete: function () {
42                    $(this).text(content);
43                }
44            });
45        });
46    }
47    // 手机端视频不自动播放
48    mc.phVideo = function () {
49        if ($(window).width() < 1200) {
50            $("video").each(function () {
51                $(this).get(0).pause();
52            })
53        }
54    }
55    /**
56     * @description 轮播视频相关初始化
57     *
58     * @param {*} $obj - JQuery轮播对象
59     */
60    mc.videoInit = function ($obj) {
61        if ($(window).width() > 1200 && $(".index_banner_video").attr("src") != "") {
62            var video = $obj.find("video").get(0);
63            // 播放结束切换到下一张
64            video.onended = function () {
65                $obj.slick("next")
66            }
67            // 切换后转为自动轮播
68            $obj.on('afterChange', function (event, slick, currentSlide) {
69                if (currentSlide == 0) {
70                    $obj.slick('slickPause');
71                    video.currentTime = 0;
72                    video.play();
73                } else {
74                    $obj.slick('slickPlay');
75                }
76            });
77        } else {
78            $obj.slick('slickPlay');
79        }
80    }
81
82    //下拉选择
83    mc.select = function ($obj) {
84        $obj.find(".mc_select_hd").click(function (e) {
85            var target = $(this).siblings(".mc_select_bd").get(0);
86            $(".mc_select_bd").not(target).stop().slideUp();
87            $(this).siblings(".mc_select_bd").stop().slideToggle();
88            // 图标旋转
89            $(this).find(".mc_select_xtb").toggleClass("on");
90            e.stopPropagation();
91        })
92        $obj.find(".mc_select_list li").click(function () {
93            var selectShow = $(this).text();
94            $(this).parents(".mc_select_bd").siblings(".mc_select_hd").find(".mc_select_show").text(selectShow);
95            // $(this).parents(".mc_select_bd").slideUp();
96        })
97        // 点击页面关闭
98        $("body").click(function () {
99            $(".mc_select_bd").stop().slideUp();
100            $(".mc_select_xtb").removeClass("on");
101        })
102    }
103
104    // 瀑布流
105    mc.warterfall = function ($obj) {
106
107        // 瀑布流宽度
108        var wfWidth = $obj.width();
109        var item = $obj.find(".mc_wf_item");
110        var itemWidth = item.width();
111        //一行放几个
112        var count = Math.floor(wfWidth / itemWidth);
113
114        var heightArr = [];
115        for (var i = 0; i < count; i++) {
116            heightArr[i] = 0;
117        }
118
119        item.each(function () {
120
121            var minAndIndexArr = minAndIndex(heightArr);
122            var minHeihgt = minAndIndexArr[0];
123            var index = minAndIndexArr[1];
124
125            $(this).css("left", index * itemWidth);
126            $(this).css("top", minHeihgt);
127
128            heightArr[index] += $(this).height();
129
130            var maxHeihgt = Math.max.apply(null, heightArr);
131            $obj.height(maxHeihgt);
132        })
133
134        // 获取数组的最小高度和它的索引
135        function minAndIndex(arr) {
136            var minHeihgt = Math.min.apply(null, arr);
137            var index = arr.indexOf(minHeihgt);
138            var minAndIndexArr = [minHeihgt, index];
139            return minAndIndexArr;
140        }
141    }
142
143    mc.tab = function($obj){
144        $obj.find(".mc_tabhd_li").click(function(){
145            var index = $(this).index();
146            $(this).addClass("on").siblings().removeClass("on");
147            $(".mc_tabbd_lisbox").eq(index).stop().fadeIn().siblings().stop().hide();
148        })
149    }
150
151    window.mc = mc;
152}(window))
153
154
155// slick常用方法
156function slickInit() {
157    // 轮播初始化
158    $('.mc_banner_slick').slick({
159        dots: true,
160        arrows: true,
161        autoplay: true,
162        // vertical: true,
163        // slidesToShow: 1,
164        // slidesToScroll: 1,
165        // asNavFor: ".s3_subcontent ul,.s3_img_slide",
166        // responsive: [{
167        //     breakpoint: 1200,
168        //     settings: {
169        //         slidesToShow: 1
170        //     }
171        // }, ]
172    });

173    //上一张 下一张
174    $('.mc_banner_slick').slick("prev");
175    $('.mc_banner_slick').slick("next");
176    // 到哪一张
177    $(".mc_banner_slick").slick("slickGoTo", index)
178    //翻页完成后执行
179    $(".mc_banner_slick").on('afterChange', function (event, slick, currentSlide, nextSlide) {
180        var index = currentSlide;
181    });
182    //开始停止自动播放
183    $obj.slick('slickPause');
184    $obj.slick('slickPlay');
185}