hth最新官网使用方法

'; } else { yearListHtml += ''; } // var activeClass = (year == selectedYear) ? 'swiper-slide active' : 'swiper-slide'; } $('#yearList').html(yearListHtml); // 初始化Swiper // if (bigpic_year) { // bigpic_year.destroy(true, true); // } // bigpic_year = new Swiper('.bigpic-year .swiper-container', { // speed: 800, // slidesPerView: 9, // spaceBetween: 0, // loop: true, // navigation: { // nextEl: '.bigpic-year .bigpic-next', // prevEl: '.bigpic-year .bigpic-prev', // }, // breakpoints: { // 1024: { // slidesPerView: 5, // spaceBetween: 10, // }, // 768: { // slidesPerView: 3, // spaceBetween: 10, // } // }, // on: { // init: function () { // // 滚动到选中的年份 // // scrollToSelectedYear(); // // alert("init") // // // 获取所有的 slide 元素 // var slides = document.querySelectorAll('.bigpic-year .swiper-slide'); // // // 遍历每个 slide，绑定点击事件 // // slides.forEach(function (slide, index) { // // slide.addEventListener('click', function () { // // // 点击时，使用 slideTo 方法跳转到对应的索引 // // // 因为开启了 loop: true，Swiper 会自动处理循环跳转 // // bigpic_year.slideTo(index); // // }); // // }); // // var activeIndex = $(".bigpic-year .swiper-slide.swiper-slide-active a").find("p").text() // // loadYearData(activeIndex); // // // }, // slideChangeTransitionEnd: function () { // // var slides = document.querySelectorAll('.bigpic-year .swiper-slide'); // // slides.forEach(function (slide, index) { // // slide.addEventListener('click', function () { // // // 点击时，使用 slideTo 方法跳转到对应的索引 // // // 因为开启了 loop: true，Swiper 会自动处理循环跳转 // // bigpic_year.slideTo(index); // // }); // // }); // // 在滑动动画完全结束后再获取当前slide // // if (!isLoading) { // // 使用Swiper的activeIndex获取当前激活的slide // // var activeIndex = bigpic_year.activeIndex; // // var activeSlide = bigpic_year.slides[activeIndex]; // // var currentYearValue = $(activeSlide).data('year'); // // // // console.log('slideChangeTransitionEnd - 当前索引: ' + activeIndex + ', 年份: ' + currentYearValue); // // // // if (currentYearValue && currentYearValue != selectedYear) { // // selectedYear = currentYearValue; // // // 更新高亮 // // $('.bigpic-year .swiper-slide').removeClass('active'); // // $(activeSlide).addClass('active'); // // // 加载数据 // // loadYearData(selectedYear); // // } // // var activeIndex = $(".bigpic-year .swiper-slide.swiper-slide-active a").find("p").text() // console.log(activeIndex) // loadYearData(activeIndex); // // } // } // } // }); $(document).on("click", ".bigpic-year .swiper-slide", function () { var _index = $(this).attr("data-index"); bigpic_year.slideTo(_index); }) // 绑定年份点击事件 $('.bigpic-year .swiper-slide,.bigpic-next,.bigpic-prev').on("click", function () { $(this).addClass("active").siblings().removeClass("active") var activeIndex = $(this).find("p").text() console.log(activeIndex) loadYearData(activeIndex); }) // $('.bigpic-year .swiper-slide').off('click').on('click', function () { // var year = $(this).data('year'); // if (year && year != selectedYear) { // selectedYear = year; // $('.bigpic-year .swiper-slide').removeClass('active'); // $(this).addClass('active'); // // 滑动到点击的年份 // var clickIndex = $(this).index(); // bigpic_year.slideTo(clickIndex, 300); // // 直接加载数据 // loadYearData(selectedYear); // } // }); } // 滚动到选中的年份 function scrollToSelectedYear() { var targetIndex = $('.bigpic-year .swiper-slide.active').index(); if (targetIndex >= 0 && bigpic_year) { bigpic_year.slideTo(targetIndex, 0); } } // 按月份分组数据 function groupByMonth(data) { var grouped = {}; for (var i = 0; i < data.length; i++) { var item = data[i]; var yearMonth = ''; if (item.wbdate && item.wbdate.length >= 7) { yearMonth = item.wbdate.substring(0, 7); } else { yearMonth = '其他'; } if (!grouped[yearMonth]) { grouped[yearMonth] = []; } grouped[yearMonth].push(item); } // 按月份倒序排序 var months = []; for (var key in grouped) { if (key !== '其他') { months.push(key); } } months.sort().reverse(); var result = {}; for (var i = 0; i < months.length; i++) { result[months[i]] = grouped[months[i]]; } if (grouped['其他']) { result['其他'] = grouped['其他']; } return result; } // 格式化日期 function formatDate(dateStr) { if (!dateStr) return ''; var date = dateStr.split(' ')[0]; return date.replace(/-/g, '/'); } // HTML转义 function escapeHtml(text) { if (!text) return ''; return text.replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } // 渲染数据到页面 function renderData(data) { if (!data || data.length === 0) { $('#bigpicList').html(''); return; } var groupedData = groupByMonth(data); var html = ''; for (var month in groupedData) { var items = groupedData[month]; var monthTitle = month; if (month !== '其他') { var parts = month.split('-'); monthTitle = parts[0] + '年' + parseInt(parts[1]) + '月'; } html += ''; } $('#bigpicList').html(html); } // 显示加载状态 function showLoading() { $('#bigpicList').html(''); } // 显示错误信息 function showError(message) { $('#bigpicList').html(''); } // 加载指定年份的数据 function loadYearData(year) { if (isLoading) return; isLoading = true; showLoading(); var jsonUrl = '/bannersj/' + year + '-date.json'; console.log('开始加载年份: ' + year); $.ajax({ url: jsonUrl, type: "GET", dataType: "json", cache: false, success: function (data) { console.log('加载成功: ' + year); if (data && data instanceof Array) { renderData(data); } else if (data && data.list && data.list instanceof Array) { renderData(data.list); } else { showError('暂无' + year + '年的数据'); } isLoading = false; }, error: function (xhr, status, error) { console.log('加载失败: ' + year); if (xhr.status === 404) { showError('暂无' + year + '年的数据'); } else { showError('数据加载失败，请稍后重试'); } isLoading = false; } }); } // 初始化页面 renderYearNav(); loadYearData(selectedYear); });