首页

static/js/index.js

@@ -0,0 +1,167 @@
+var product_swiper = new Swiper(".product-swiper", {
+    loop: true,
+    slidesPerView: 4,
+    spaceBetween: 20,
+    centeredSlides: true,
+    grabCursor: true,
+    speed: 800,
+    autoplay: {
+        delay: 3000, // 自动切换的时间间隔（单位：毫秒）
+        disableOnInteraction: false, // 用户操作后是否停止自动播放（false 表示不停止）
+    },
+    breakpoints: {
+        0: {
+            slidesPerView: 1,
+            centeredSlides: true,
+        },
+        700: {
+            slidesPerView: 2,
+            centeredSlides: true,
+        },
+        1050: {
+            slidesPerView: 3,
+            centeredSlides: false,
+        },
+        1450: {
+            slidesPerView: 4,
+            centeredSlides: false,
+        },
+        1920: {
+            slidesPerView: 4,
+            centeredSlides: false,
+        },
+    },
+});
+
+$(document).ready(() => {
+    $(".product-prev-button").click(() => {
+        console.log("1")
+        product_swiper.slidePrev()
+    })
+    $(".product-next-button").click(() => {
+        product_swiper.slideNext()
+    })
+})
+
+const carousel_swiper = new Swiper(".carousel-swiper", {
+    loop: true,
+    effect: "fade",
+    autoplay: {
+        delay: 4000,
+        disableOnInteraction: false,
+    },
+    snpeed: 300,
+    on: {
+        slideChangeTransitionStart: function () {
+            $('.carousel-aos').hide(0);
+            $('.carousel-aos').removeClass('aos-init').removeClass('aos-animate');
+        },
+        slideChangeTransitionEnd: function () {
+            $('.carousel-aos').show(0);
+            $('.carousel-aos').addClass('aos-init').addClass('aos-animate');
+        },
+        slideChange: function () {
+            $(".carousel-pagination-item").each((index, elem) => {
+                if (index == this.realIndex) {
+                    $(elem).addClass("carousel-pagination-item-active")
+                } else {
+                    $(elem).removeClass("carousel-pagination-item-active")
+                }
+            })
+        },
+    },
+});
+$(document).ready(() => {
+    $(".carousel-pagination-item").each((index, elem) => {
+        $(elem).click(() => {
+            carousel_swiper.slideToLoop(index, 800, false)
+        })
+    })
+})
+
+$('#contactus-submit-button').click(() => {
+    let comment_title = $('#contactus-first').val() + $('#contactus-last').val()
+    let comment_contact = $('#contactus-phone').val() + '|' + $('#contactus-address').val()
+    let comment_content = $('#contactus-content').val()
+    if ($('#contactus-first').val().length < 1) {
+        alert('请输入姓')
+    } else if ($('#contactus-last').val().length < 1) {
+        alert('请输入名')
+    } else if ($('#contactus-phone').val().length < 1) {
+        alert('请输入电话')
+    } else if ($('#contactus-address').val().length < 1) {
+        alert('请输入地址')
+    } else if ($('#contactus-content').val().length < 1) {
+        alert('请输入您的需求内容')
+    } else {
+        $.ajax({
+            "url": base_url + "/site/comment/add?auth_id=" + "1" + "&auth_key=" + "97a73b7e-9fde-474f-ba2b-ae4703d1e7bb",
+            "method": "POST",
+            "timeout": 0,
+            "headers": {
+                "Content-Type": "application/json"
+            },
+            "data": JSON.stringify({
+                comment_title: comment_title,
+                comment_contact: comment_contact,
+                comment_content: comment_content
+            }),
+        }).done(function (response) {
+            alert(response.errorMessage)
+        }).catch(() => {
+            alert('网络错误')
+        });
+    }
+})
+
+$(document).ready(() => {
+    $('.navbar-offcanvas-body').hide()
+    $('.navbar-toggler-icon').click(() => {
+        $('.navbar-offcanvas').show()
+        $('.navbar-offcanvas-mask').show()
+        $('.navbar-offcanvas').animate({ width: '300px' }, () => {
+            $('.navbar-offcanvas-body').show()
+        })
+    })
+    $('.navbar-offcanvas-close-icon').click(() => {
+        $('.navbar-offcanvas-body').hide()
+        $('.navbar-offcanvas').animate({ width: '0px' }, () => {
+            $('.navbar-offcanvas-mask').hide()
+            $('.navbar-offcanvas').hide()
+        })
+    })
+    $('.navbar-offcanvas-mask').click(() => {
+        $('.navbar-offcanvas-body').hide()
+        $('.navbar-offcanvas').animate({ width: '0px' }, () => {
+            $('.navbar-offcanvas-mask').hide()
+            $('.navbar-offcanvas').hide()
+        })
+    })
+
+    $('.navbar-offcanvas-inner-button').each((index, item) => {
+        $(item).click(() => {
+            if ($(item).parent().children('.navbar-offcanvas-inner').css('display') == 'block') {
+                $(item).children('.navbar-offcanvas-inner-icon').animate({ 'rotate': '0deg' })
+                $(item).parent().children('.navbar-offcanvas-inner').hide()
+            } else {
+                $(item).children('.navbar-offcanvas-inner-icon').animate({ 'rotate': '-90deg' })
+                $(item).parent().children('.navbar-offcanvas-inner').show()
+            }
+        })
+    })
+})
+
+$(document).ready(function () {
+    $(window).on('scroll', function () {
+        // 检查页面滚动的距离
+        if ($(window).scrollTop() > 100) { // 当滚动距离超过 50px 时
+            $('.navbar').addClass('bg-white').removeClass('bg-transparent');
+            $('.navbar a').removeClass('text-white');
+            $('.navbar input').removeClass('border-white').removeClass('text-white').removeClass('placeholder-white');
+        } else {
+            $('.navbar').addClass('bg-transparent').removeClass('bg-white');
+            $('.navbar a').addClass('text-white');
+            $('.navbar input').addClass('border-white').addClass('text-white').addClass('placeholder-white');
+        }
+    });
+});