卡厄思
梦
境
菜单
首页
回到首页
WIKI工具
全站样式
全站JS
修改导航栏
测试
沙盒
可视化管理器
战斗员管理器
卡牌管理器
伙伴管理器
装备管理器
词典管理器
图鉴
战斗员
伙伴
装备
怪物卡牌
中立卡牌
词典
小工具
配队模拟器
节奏榜生成器
搜索
链入页面
相关更改
特殊页面
页面信息
最近更改
登录
MediaWiki
查看“︁Carousel.js”︁的源代码
←
MediaWiki:Carousel.js
因为以下原因,您没有权限编辑该页面:
您请求的操作仅限属于该用户组的用户执行:
用户
此页面为本wiki上的软件提供界面文本,并受到保护以防止滥用。 如欲修改所有wiki的翻译,请访问
translatewiki.net
上的MediaWiki本地化项目。
您无权编辑此JavaScript页面,因为编辑此页面可能会影响所有访问者。
您可以查看和复制此页面的源代码。
$(function() { $('.carousel-container').each(function() { var $container = $(this); var $wrapper = $container.find('.carousel-wrapper'); var $slides = $container.find('.carousel-slide'); var $titleItems = $container.find('.carousel-title-item'); var slideCount = $slides.length; var currentSlide = 0; var autoPlayInterval; var isTransitioning = false; // 切换到指定幻灯片 function goToSlide(index) { if (isTransitioning) return; if (index < 0) index = slideCount - 1; if (index >= slideCount) index = 0; isTransitioning = true; currentSlide = index; $wrapper.css('transform', 'translateX(-' + (index * 100) + '%)'); // 更新标题状态 $titleItems.each(function(i) { var $item = $(this); var $text = $item.find('.title-text'); var $indicator = $item.find('.title-indicator'); if (i === index) { $item.addClass('active'); $text.css('opacity', '1').css('font-weight', 'bold'); $indicator.css('background', '#ff6600'); } else { $item.removeClass('active'); $text.css('opacity', '0.7').css('font-weight', 'normal'); $indicator.css('background', 'transparent'); } }); setTimeout(function() { isTransitioning = false; }, 500); } // 下一张 function nextSlide() { goToSlide(currentSlide + 1); } // 上一张 function prevSlide() { goToSlide(currentSlide - 1); } // 自动播放 function startAutoPlay() { autoPlayInterval = setInterval(nextSlide, 10000); } // 停止自动播放 function stopAutoPlay() { clearInterval(autoPlayInterval); } // 绑定左右切换按钮事件(处理图片点击) $container.find('.carousel-next').click(function(e) { e.preventDefault(); e.stopPropagation(); stopAutoPlay(); nextSlide(); startAutoPlay(); }); $container.find('.carousel-prev').click(function(e) { e.preventDefault(); e.stopPropagation(); stopAutoPlay(); prevSlide(); startAutoPlay(); }); // 防止按钮内的图片链接跳转 $container.find('.carousel-btn img, .carousel-btn a').click(function(e) { e.preventDefault(); return false; }); // 绑定标题点击事件 $titleItems.click(function() { var slideIndex = parseInt($(this).attr('data-slide')); stopAutoPlay(); goToSlide(slideIndex); startAutoPlay(); }); // 鼠标悬停在容器时暂停 $container.hover( function() { stopAutoPlay(); }, function() { startAutoPlay(); } ); // 触摸滑动支持(移动设备) var touchStartX = 0; var touchEndX = 0; $container.on('touchstart', function(e) { touchStartX = e.originalEvent.changedTouches[0].screenX; }); $container.on('touchend', function(e) { touchEndX = e.originalEvent.changedTouches[0].screenX; handleSwipe(); }); function handleSwipe() { if (touchEndX < touchStartX - 50) { stopAutoPlay(); nextSlide(); startAutoPlay(); } if (touchEndX > touchStartX + 50) { stopAutoPlay(); prevSlide(); startAutoPlay(); } } // 键盘控制 $(document).keydown(function(e) { if ($container.is(':hover')) { if (e.keyCode === 37) { // 左箭头 stopAutoPlay(); prevSlide(); startAutoPlay(); } else if (e.keyCode === 39) { // 右箭头 stopAutoPlay(); nextSlide(); startAutoPlay(); } } }); // 启动自动播放 if (slideCount > 1) { startAutoPlay(); } }); });
返回
MediaWiki:Carousel.js
。