https://skyworthxr.com/views/prodduct/js/gc.js

1
2let mainClass = 'gc-main'
3let minClass = 'gc-min'
4let nextClass = 'gc-next'
5let lastClass = 'gc-last'
6let domindex = null
7let gcCarousel = function () {
8    // let carouselCells = document.getElementsByClassName('gc-item')
9    let carouselCells = $('.gc-item')
10    $("body").on('click', '.gc-item', function () {
11        let px = window.innerWidth;
12        console.log(px > 500)
13        if (px > 500) {
14            let index = $(this).data('index');
15            let hasClassnext = $(this).hasClass('gc-next')
16            let hasClasslast = $(this).hasClass('gc-last')
17            let hasClassmin = $(this).hasClass('gc-min')
18            if (!(hasClassnext || hasClasslast || hasClassmin)) return false
19            $('.gc-item').removeClass(mainClass).removeClass(minClass).removeClass('gc-next').removeClass('gc-last')
20            $(this).addClass(mainClass)
21            domindex = index
22            if (index == 1) {
23                $(this).addClass(mainClass).next().addClass('gc-next').next().addClass(minClass)
24            } else if (index == carouselCells.length) {
25                $(this).addClass(mainClass).prev().addClass('gc-next').prev().addClass(minClass)
26            } else {
27                $(this).prev().addClass(minClass)
28                $(this).next().addClass('gc-next').next().addClass('gc-last')
29
30            }
31
32            $(this).on('touchstart', function (e) {
33                handleTouchStart(e)
34            })
35            $(this).on('touchmove', function (e) {
36                handleTouchMove(e)
37            })
38            $(this).on('touchend', function (e) {
39                handleTouchEnd(e)
40            })
41
42        }
43
44    })
45    $('body').on('touchstart', '.gc-item', function (e) {
46        handleTouchStart(e)
47    })
48    $('body').on('touchmove', '.gc-item', function (e) {
49        handleTouchMove(e)
50    })
51    $('body').on('touchend', '.gc-item', function (e) {
52        handleTouchEnd(this)
53    })
54
55}
56let initialX = null;
57let isRight = false;
58function handleTouchStart(event) {
59    initialX = event.touches[0].clientX;
60}
61
62function handleTouchMove(event) {
63    if (!initialX) {
64        return;
65    }
66    const currentX = event.touches[0].clientX;
67    const deltaX = currentX - initialX;
68
69    console.log(initialX)
70    console.log(currentX)
71    console.log(Math.abs(deltaX))
72    if(Math.abs(deltaX)>20) return false
73    if (deltaX > 0) {
74        console.log('向右滑动');
75        isRight = true
76    } else if (deltaX < 0) {
77        isRight = false
78        console.log('向左滑动');
79    }
80
81    initialX = null; // 重置初始触摸点
82}
83
84function handleTouchEnd(_this) {
85    initialX = null;
86    let index = $(_this).data('index');
87    let carouselCells = $('.gc-item')
88    if (index == 1 && isRight) {
89        return false
90    }
91    if (index == carouselCells.length && !isRight) {
92        return false
93    }
94    $('.gc-item').removeClass(mainClass).removeClass(minClass).removeClass('gc-next').removeClass('gc-last')
95
96    if (!isRight) {
97        $(_this).removeClass('gc-main').addClass(minClass).next().addClass('gc-main').next().addClass(minClass)
98    } else {
99        $(_this).removeClass('gc-main').addClass(nextClass).prev().addClass(mainClass).next().addClass('gc-main').next().addClass(minClass)
100    }
101}
102gcCarousel()