https://fna.cn/js/front/home/3Dplay_ver2-ed01475776b57e5ef65b89516a978489.js

1function play3D() {
2    // 全局变量
3    var garyImgGroup = []; // 图片组
4    var gvarImgGroupCurrent = 3; // 当前显示的图片组
5    var gvarImgGroupSize = 0; // 图片组数量(0~X)，每个图片组可以有0~3张图
6    var autoPlayInterval = 4000; // 自动轮播间隔时间
7
8
9    $(document).ready(function () {
10        /* 初始化图片组 */
11        initAryImgGroup();
12        /* 绑定轮播事件 */
13        bindClick();
14        /* 自动轮播 */
15        startAutoPlay();
16
17        /* 网页标签切换控制 */
18        document.addEventListener('visibilitychange', function () { // 浏览器切换事件
19            if (document.visibilityState == 'hidden') { // 离开当前tab标签
20                /* 停止自动轮播 */
21                stopAutoPlay();
22            } else { // 回到当前tab标签
23                /* 开始自动轮播 */
24                startAutoPlay();
25            }
26        });
27
28
29        // 点击图片跳转详细页面
30        $(".ray_Carousel_imgDtlLeft,.ray_Carousel_imgDtlRight").click(function () {
31            if ($(this).parent().hasClass("ray_Carousel_imgSubViewMiddle")) {
32                moveToDetail();
33            }
34        });
35        $("#companyNameArea").click(function () {
36            moveToDetail();
37        });
38
39        // 鼠标悬停在当前公司区域时，轮播停止，鼠标离开后，轮播继续
40        $("#detalInfoArea, #companyNameArea, .ray_Carousel_imgDtlLeft, .ray_Carousel_imgDtlRight").mousemove(function () {
41            /* 停止自动轮播 */
42            stopAutoPlay();
43        }).mouseout(function () {
44            /* 开始自动轮播 */
45            startAutoPlay();
46        });
47    });
48
49
50    /* 跳转详细页面==============================================================*/
51    function moveToDetail() {
52        var userId = $("input[name='hdUserId']").val();
53        var url = "/front/member/detail/" + userId;
54        location.href=url;
55    }
56
57
58    /* 初始化图片组==============================================================*/
59    function initAryImgGroup() {
60        // 图片组
61        gvarImgGroupSize = $(".ray_Carousel_imgPool").find("li").length;
62        if (gvarImgGroupSize == 0) {
63            // 没有图片...
64            return;
65        } else if (gvarImgGroupSize == 1) {
66            // 只有1组图片
67            var imgPool1 = $(".ray_Carousel_imgPool").find("li").first();
68            var imgGroup1 = setImgToImgGroup(imgPool1);
69            garyImgGroup.push(imgGroup1);
70            garyImgGroup.push(imgGroup1);
71            garyImgGroup.push(imgGroup1);
72            garyImgGroup.push(imgGroup1);
73            garyImgGroup.push(imgGroup1);
74            garyImgGroup.push(imgGroup1);
75            garyImgGroup.push(imgGroup1);
76            gvarImgGroupCurrent = 0;
77        } else if (gvarImgGroupSize == 2) {
78            // 只有2组图片
79            var imgPool1 = $(".ray_Carousel_imgPool").find("li").first();
80            var imgPool2 = imgPool1.next();
81            var imgGroup1 = setImgToImgGroup(imgPool1);
82            var imgGroup2 = setImgToImgGroup(imgPool2);
83            garyImgGroup.push(imgGroup1);
84            garyImgGroup.push(imgGroup2);
85            garyImgGroup.push(imgGroup1);
86            garyImgGroup.push(imgGroup2);
87            garyImgGroup.push(imgGroup1);
88            garyImgGroup.push(imgGroup2);
89            garyImgGroup.push(imgGroup1);
90            garyImgGroup.push(imgGroup2);
91            gvarImgGroupCurrent = 1;
92        } else if (gvarImgGroupSize == 3) {
93            // 只有3组图片
94            var imgPool1 = $(".ray_Carousel_imgPool").find("li").first();
95            var imgPool2 = imgPool1.next();
96            var imgPool3 = imgPool2.next();
97            var imgGroup1 = setImgToImgGroup(imgPool1);
98            var imgGroup2 = setImgToImgGroup(imgPool2);
99            var imgGroup3 = setImgToImgGroup(imgPool3);
100            garyImgGroup.push(imgGroup1);
101            garyImgGroup.push(imgGroup2);
102            garyImgGroup.push(imgGroup3);
103            garyImgGroup.push(imgGroup1);
104            garyImgGroup.push(imgGroup2);
105            garyImgGroup.push(imgGroup3);
106            garyImgGroup.push(imgGroup1);
107            garyImgGroup.push(imgGroup2);
108            garyImgGroup.push(imgGroup3);
109            gvarImgGroupCurrent = 0;
110        } else if (gvarImgGroupSize == 4) {
111            // 只有4组图片
112            var imgPool1 = $(".ray_Carousel_imgPool").find("li").first();
113            var imgPool2 = imgPool1.next();
114            var imgPool3 = imgPool2.next();
115            var imgPool4 = imgPool3.next();
116            var imgGroup1 = setImgToImgGroup(imgPool1);
117            var imgGroup2 = setImgToImgGroup(imgPool2);
118            var imgGroup3 = setImgToImgGroup(imgPool3);
119            var imgGroup4 = setImgToImgGroup(imgPool4);
120            garyImgGroup.push(imgGroup1);
121            garyImgGroup.push(imgGroup2);
122            garyImgGroup.push(imgGroup3);
123            garyImgGroup.push(imgGroup4);
124            garyImgGroup.push(imgGroup1);
125            garyImgGroup.push(imgGroup2);
126            garyImgGroup.push(imgGroup3);
127            garyImgGroup.push(imgGroup4);
128        } else if (gvarImgGroupSize == 5) {
129            // 只有5组图片
130            var imgPool1 = $(".ray_Carousel_imgPool").find("li").first();
131            var imgPool2 = imgPool1.next();
132            var imgPool3 = imgPool2.next();
133            var imgPool4 = imgPool3.next();
134            var imgPool5 = imgPool4.next();
135            var imgGroup1 = setImgToImgGroup(imgPool1);
136            var imgGroup2 = setImgToImgGroup(imgPool2);
137            var imgGroup3 = setImgToImgGroup(imgPool3);
138            var imgGroup4 = setImgToImgGroup(imgPool4);
139            var imgGroup5 = setImgToImgGroup(imgPool5);
140            garyImgGroup.push(imgGroup1);
141            garyImgGroup.push(imgGroup2);
142            garyImgGroup.push(imgGroup3);
143            garyImgGroup.push(imgGroup4);
144            garyImgGroup.push(imgGroup5);
145            garyImgGroup.push(imgGroup1);
146            garyImgGroup.push(imgGroup2);
147            garyImgGroup.push(imgGroup3);
148            garyImgGroup.push(imgGroup4);
149            garyImgGroup.push(imgGroup5);
150        } else if (gvarImgGroupSize == 6) {
151            // 只有6组图片
152            var imgPool1 = $(".ray_Carousel_imgPool").find("li").first();
153            var imgPool2 = imgPool1.next();
154            var imgPool3 = imgPool2.next();
155            var imgPool4 = imgPool3.next();
156            var imgPool5 = imgPool4.next();
157            var imgPool6 = imgPool5.next();
158            var imgGroup1 = setImgToImgGroup(imgPool1);
159            var imgGroup2 = setImgToImgGroup(imgPool2);
160            var imgGroup3 = setImgToImgGroup(imgPool3);
161            var imgGroup4 = setImgToImgGroup(imgPool4);
162            var imgGroup5 = setImgToImgGroup(imgPool5);
163            var imgGroup6 = setImgToImgGroup(imgPool6);
164            garyImgGroup.push(imgGroup1);
165            garyImgGroup.push(imgGroup2);
166            garyImgGroup.push(imgGroup3);
167            garyImgGroup.push(imgGroup4);
168            garyImgGroup.push(imgGroup5);
169            garyImgGroup.push(imgGroup6);
170            garyImgGroup.push(imgGroup1);
171            garyImgGroup.push(imgGroup2);
172            garyImgGroup.push(imgGroup3);
173            garyImgGroup.push(imgGroup4);
174            garyImgGroup.push(imgGroup5);
175            garyImgGroup.push(imgGroup6);
176        } else if (gvarImgGroupSize >= 7) {
177            // 有7组或更多组图片
178            var ray_Carousel_imgPool;
179            for (var i = 0; i < gvarImgGroupSize; i++) {
180                if (i == 0) {
181                    ray_Carousel_imgPool = $(".ray_Carousel_imgPool").find("li").first();
182                } else {
183                    ray_Carousel_imgPool = ray_Carousel_imgPool.next();
184                }
185                garyImgGroup.push(setImgToImgGroup(ray_Carousel_imgPool));
186            }
187        }
188        setImg(0);
189    }
190
191    function setImgToImgGroup(imgPoolItem) {
192        var imgGroup = {};
193        var imgCnt = $(imgPoolItem).find("img").length;
194        if (imgCnt == 0) {
195        } else if (imgCnt == 1) {
196            imgGroup.l = $(imgPoolItem).find("img").first();
197            imgGroup.r = imgGroup.l;
198        } else if (imgCnt >= 2) {
199            imgGroup.l = $(imgPoolItem).find("img").first();
200            imgGroup.r = imgGroup.l.next();
201        }
202        // set info
203        imgGroup.userId = $(imgPoolItem).find(".userId").text();
204        imgGroup.companyName = $(imgPoolItem).find(".companyName").text();
205        imgGroup.productIntro = $(imgPoolItem).find(".productIntro").text();
206        imgGroup.companyMemo = $(imgPoolItem).find(".companyMemo").text();
207        return imgGroup;
208    }
209
210    /* 初始化图片组==============================================================*/
211
212
213// 设置图片
214// moveDirection:移动方向[1左移 2右移]
215    function setImg(moveDirection) {
216        if (moveDirection == 0) {

217            $(".ray_Carousel_imgSubViewBase").each(function (i, n) {
218                var j = i < 4 ? i + 3 : i - 4;
219                var div_l = $(n).find("div").first();
220                var div_r = div_l.next();
221                $(div_l).css("background-image", "url(" + garyImgGroup[j].l.attr("src") + ")");
222                $(div_r).css("background-image", "url(" + garyImgGroup[j].r.attr("src") + ")");
223            });
224            // 左移
225        } else if (moveDirection == 1) {
226            gvarImgGroupCurrent = gvarImgGroupCurrent + 1;
227            if (gvarImgGroupCurrent > gvarImgGroupSize - 1) gvarImgGroupCurrent = 0;
228            var lvarImgGroupRightOut = gvarImgGroupCurrent + 3;
229            if (lvarImgGroupRightOut > gvarImgGroupSize - 1) {
230                if (gvarImgGroupSize == 0) {
231                    return;
232                } else if (gvarImgGroupSize == 1) {
233                    lvarImgGroupRightOut = 0;
234                } else if (gvarImgGroupSize == 2) {
235                    lvarImgGroupRightOut = Math.abs(gvarImgGroupCurrent - 1);
236                } else if (gvarImgGroupSize >= 3) {
237                    lvarImgGroupRightOut = gvarImgGroupCurrent + (3 - gvarImgGroupSize);
238                }
239            }
240            // set right out img
241            var div_l = $(".ray_Carousel_imgSubViewRightOut").find("div").first();
242            var div_r = div_l.next();
243            $(div_l).css("background-image", "url(" + garyImgGroup[lvarImgGroupRightOut].l.attr("src") + ")");
244            $(div_r).css("background-image", "url(" + garyImgGroup[lvarImgGroupRightOut].r.attr("src") + ")");
245            // 右移
246        } else if (moveDirection == 2) {
247            gvarImgGroupCurrent = gvarImgGroupCurrent - 1;
248            if (gvarImgGroupCurrent <= -1) gvarImgGroupCurrent = gvarImgGroupSize - 1;
249            var varImgGroupLeftOut = gvarImgGroupCurrent - 3;
250            if (varImgGroupLeftOut < 0) {
251                if (gvarImgGroupSize == 0) {
252                    return;
253                } else if (gvarImgGroupSize == 1) {
254                    varImgGroupLeftOut = 0;
255                } else if (gvarImgGroupSize == 2) {
256                    varImgGroupLeftOut = Math.abs(gvarImgGroupCurrent - 1);
257                } else if (gvarImgGroupSize >= 2) {
258                    varImgGroupLeftOut = gvarImgGroupCurrent + (gvarImgGroupSize - 3);
259                }
260            }
261            // set left out img
262            var div_l = $(".ray_Carousel_imgSubViewLeftOut").find("div").first();
263            var div_r = div_l.next();
264            $(div_l).css("background-image", "url(" + garyImgGroup[varImgGroupLeftOut].l.attr("src") + ")");
265            $(div_r).css("background-image", "url(" + garyImgGroup[varImgGroupLeftOut].r.attr("src") + ")");
266        }
267
268        // 信息区域文字设定
269        $(".fadeOut").removeClass("fadeOut").addClass("fadeIn");
270        $("#companyNameArea").text(garyImgGroup[gvarImgGroupCurrent].companyName);
271        $("#companyMemoArea").text(garyImgGroup[gvarImgGroupCurrent].companyMemo);
272        $("#productIntroArea").text(garyImgGroup[gvarImgGroupCurrent].productIntro);
273        $("input[name='hdUserId']").val(garyImgGroup[gvarImgGroupCurrent].userId);
274    }
275
276
277    /* 轮播方法==========================================================================*/
278
279// 左轮播
280    function moveLeft() {
281        /* 解绑轮播事件 */
282        $(".ray_Carousel_btnRight").unbind('click');
283        $(".ray_Carousel_btnLeft").unbind('click');
284        /* 停止自动轮播 */
285        stopAutoPlay();
286
287        $(".fadeIn").removeClass("fadeIn").addClass("fadeOut");
288
289        /*左边外视图框 隐藏*/
290        $(".ray_Carousel_imgSubViewLeftOut").removeClass("ray_Carousel_imgSubViewLeftOut").addClass("imgSubViewHide");
291
292        /* 左边视图框2 ==> 左边外视图框 */
293        $(".ray_Carousel_imgSubViewLeft2").removeClass("ray_Carousel_imgSubViewLeft2").addClass("ray_Carousel_imgSubViewLeftOut");
294
295        /* 左边视图框 ==> 左边视图框2 */
296        $(".ray_Carousel_imgSubViewLeft").removeClass("ray_Carousel_imgSubViewLeft").addClass("ray_Carousel_imgSubViewLeft2");
297
298        /* 中间视图框 ==> 左边视图框 */
299        $(".ray_Carousel_imgSubViewMiddle").removeClass("ray_Carousel_imgSubViewMiddle").addClass("ray_Carousel_imgSubViewLeft");
300
301        /* 右边视图框 ==> 中间视图框 */
302        $(".ray_Carousel_imgSubViewRight").removeClass("ray_Carousel_imgSubViewRight").addClass("ray_Carousel_imgSubViewMiddle");
303
304        /* 右边视图框2 ==> 右边视图框 */
305        $(".ray_Carousel_imgSubViewRight2").removeClass("ray_Carousel_imgSubViewRight2").addClass("ray_Carousel_imgSubViewRight");
306
307        /* 右边外视图框 ==> 右边视图框2 */
308        $(".ray_Carousel_imgSubViewRightOut").removeClass("ray_Carousel_imgSubViewRightOut").addClass("ray_Carousel_imgSubViewRight2");
309
310        /*左边外视图框(被隐藏） ==> 右边外视图框 */
311        $(".imgSubViewHide").addClass("ray_Carousel_imgSubViewRightOut").hide();
312
313        /*显示*/
314        setTimeout(function () {
315            $(".ray_Carousel_imgSubViewRightOut").removeClass("imgSubViewHide").show();
316            /* 重新绑定轮播事件 */
317            bindClick();
318            /* 设置图片 */
319            setImg(1);
320            /* 开始自动轮播 */
321            startAutoPlay();
322        }, 500);
323    }
324
325// 右轮播
326    function moveRight() {
327        /* 解绑轮播事件 */
328        $(".ray_Carousel_btnRight").unbind('click');
329        $(".ray_Carousel_btnLeft").unbind('click');
330        /* 停止自动轮播 */
331        stopAutoPlay();
332
333        $(".fadeIn").removeClass("fadeIn").addClass("fadeOut");
334
335        /*右边外视图框 隐藏*/
336        $(".ray_Carousel_imgSubViewRightOut").removeClass("ray_Carousel_imgSubViewRightOut").addClass("imgSubViewHide");
337
338        /* 右边视图框2 ==> 右边外视图框 */
339        $(".ray_Carousel_imgSubViewRight2").removeClass("ray_Carousel_imgSubViewRight2").addClass("ray_Carousel_imgSubViewRightOut");
340
341        /* 右边视图框 ==> 右边视图框2 */
342        $(".ray_Carousel_imgSubViewRight").removeClass("ray_Carousel_imgSubViewRight").addClass("ray_Carousel_imgSubViewRight2");
343
344        /* 中间视图框 ==> 右边视图框 */
345        $(".ray_Carousel_imgSubViewMiddle").removeClass("ray_Carousel_imgSubViewMiddle").addClass("ray_Carousel_imgSubViewRight");
346
347        /* 左边视图框 ==> 中间视图框 */
348        $(".ray_Carousel_imgSubViewLeft").removeClass("ray_Carousel_imgSubViewLeft").addClass("ray_Carousel_imgSubViewMiddle");
349
350        /* 左边视图框2 ==> 左边视图框 */
351        $(".ray_Carousel_imgSubViewLeft2").removeClass("ray_Carousel_imgSubViewLeft2").addClass("ray_Carousel_imgSubViewLeft");
352
353        /* 左边外视图框 ==> 左边视图框2 */
354        $(".ray_Carousel_imgSubViewLeftOut").removeClass("ray_Carousel_imgSubViewLeftOut").addClass("ray_Carousel_imgSubViewLeft2");
355
356        /*右边外视图框(被隐藏） ==> 左边外视图框 */
357        $(".imgSubViewHide").addClass("ray_Carousel_imgSubViewLeftOut").hide();
358
359        /*显示*/
360        setTimeout(function () {
361            $(".ray_Carousel_imgSubViewLeftOut").removeClass("imgSubViewHide").show();
362            /* 重新绑定轮播事件 */
363            bindClick();
364            /* 设置图片 */
365            setImg(2);
366            /* 开始自动轮播 */
367            startAutoPlay();
368        }, 500);
369    }
370
371// 绑定轮播点击事件
372    function bindClick() {
373        // 轮播按钮事件绑定
374        $(".ray_Carousel_btnRight").bind('click', function () {
375            moveLeft();
376        });
377        $(".ray_Carousel_btnLeft").bind('click', function () {
378            moveRight();
379        });
380    }
381

382// 自动轮播
383    var autoPlay;
384
385// 自动轮播开始
386    function startAutoPlay() {
387        /* 停止自动轮播 */
388        stopAutoPlay();
389
390        autoPlay = setInterval(function () {
391            moveLeft();
392        }, autoPlayInterval);
393    }
394
395// 自动轮播停止
396    function stopAutoPlay() {
397        clearInterval(autoPlay);
398    }
399}
400/* 轮播方法==========================================================================*/