实时体育数据 数据来源：西瓜体育
⚽ 足球实时 (0)
| 主队 | 比分 | 客队 | 联赛 | 时间(北京) |
|---|---|---|---|---|
| 近期暂无比赛，请稍后再来查看。 | ||||
更新于 2026-06-21 20:33（北京时间）
立即购买 轮播
西瓜体育为您呈现多路高清赛事直播，涵盖足球、篮球等热门体育项目。
西瓜体育组件
请确保已引入西瓜体育直播核心js文件：static/js/xigua-player.js。参考本页获取最佳配置。
您可通过配置参数和灵活的数据接口，深度定制您的观赛体验。
直播源结构:
<div class="tns-carousel tns-nav-enabled">
<div class="tns-carousel-inner" data-carousel-options='{}'>
<!-- Carousel slides here -->
</div>
</div>配置参数:
- tns-nav-enabled - 导航点启用时，辅助对齐绝对定位的控件。
- tns-controls-lg - 大型翻页按钮。
- tns-controls-sm - 小型翻页按钮。
- tns-controls-static - 翻页按钮始终可见。
- tns-controls-outside - 翻页按钮置于内容外部。
- tns-nav-start - 导航点左对齐（默认居中）。
- tns-nav-end - 导航点右对齐（默认居中）。
- tns-nav-inside - 导航点绝对定位在内容之上。
- tns-nav-light - 切换导航点为浅色主题。
数据接口:
data-carousel-options = '{}': - "mode": "carousel" | "gallery" - carousel模式下内容滑动切换，gallery模式下淡入淡出并一次性显示所有内容。
- "axis": "horizontal" | "vertical" - 滑动轴向，水平或垂直。
- "items": 1 - 单屏显示的项目数。
- "nav": true/false - 启用/禁用导航点。
- "controls": true/false - 启用/禁用上一页/下一页按钮。
- "loop": true/false - 启用/禁用无限循环。
- "speed": 300 - 滑动动画速度（毫秒）。
- "autoplay": true/false - 自动切换幻灯片。
- "autoplayTimeout": 5000 - 自动切换间隔时间（毫秒）。
- "gutter": 0 - 项目之间的间距（像素）。
- "autoHeight": true/false - 滑动容器高度随内容自动调整。
- "responsive": {"0": {"items": 1}, "768": {"items": 2}, ...} - 不同屏幕尺寸下显示的项目数。可基于屏幕尺寸调整任意选项。
- 更多配置请访问https://github.com/ganlanyuan/tiny-slider#options
單一項目 + 點點 + 循環 (預設)
<!-- One item + Dots + Loop (defaults) -->
<div class="tns-carousel tns-nav-enabled">
<div class="tns-carousel-inner">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
</div>
</div>// One item + Dots + Loop (defaults)
.tns-carousel.tns-nav-enabled
.tns-carousel-inner
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
單一項目 + 靜態控制 + 內部點點 + 無循環
<!-- One item + Static controls + Dots inside + No loop -->
<div class="tns-carousel tns-controls-static tns-nav-enabled tns-nav-light tns-nav-inside">
<div class="tns-carousel-inner" data-carousel-options='{"loop": false}'>
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
</div>
</div>// One item + Static controls + Dots inside + No loop
.tns-carousel.tns-controls-static.tns-nav-enabled.tns-nav-light.tns-nav-inside
.tns-carousel-inner(data-carousel-options='{"loop": false}')
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
垂直輪播 + 無點點
<!-- Vertical carousel + Loop + No dots -->
<div class="tns-carousel">
<div class="tns-carousel-inner" data-carousel-options='{"axis": "vertical", "nav": false}'>
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
</div>
</div>// Vertical carousel + Loop + No dots
.tns-carousel
.tns-carousel-inner(data-carousel-options='{"axis": "vertical", "nav": false}')
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
多個項目 + 外部靜態控制 + 無點點 + 循環 (響應式)
<!-- Multiple items + Static controls outside + No dots + Loop (Responsive) -->
<div class="tns-carousel tns-controls-static tns-controls-outside">
<div class="tns-carousel-inner" data-carousel-options='{"items": 3, "nav": false, "responsive": {"0":{"items":1},"500":{"items":2, "gutter": 18},"768":{"items":3, "gutter": 20}, "1100":{"gutter": 24}}}'>
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
</div>
</div>// Multiple items + Static controls outside + No dots + Loop (Responsive)
.tns-carousel.tns-controls-static.tns-controls-outside
.tns-carousel-inner(data-carousel-options='{"items": 3, "nav": false, "responsive": {"0":{"items":1},"500":{"items":2, "gutter": 18},"768":{"items":3, "gutter": 20}, "1100":{"gutter": 24}}}')
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
單一項目 + 淡入淡出轉場 + 點點 + 循環
<!-- One item + Fade transition + Dots + Loop -->
<div class="tns-carousel tns-nav-enabled">
<div class="tns-carousel-inner data-carousel-options='{"mode": "gallery", "speed": 1000}'">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
</div>
</div>// One item + Fade transition + Dots + Loop
.tns-carousel.tns-nav-enabled
.tns-carousel-inner(data-carousel-options='{"mode": "gallery", "speed": 1000}')
img(src="path-to-image", alt"Alt text")
img(src="path-to-image", alt"Alt text")
img(src="path-to-image", alt"Alt text")
淡入淡出轉場 + 圖層動畫
從上到下
從下到上
從左到右
從右到左
<!-- Fade transition + Layer animations -->
<div class="tns-carousel">
<div class="tns-carousel-inner" data-carousel-options='{"mode": "gallery", "nav": false}'>
<div>
<div class="bg-faded-primary text-center py-5 px-3">
<h3 class="from-top">From top to bottom</h3>
<p class="fs-lg mb-4 pb-3 from-bottom delay-1">From bottom to top</p>
<button class="btn btn-primary scale-down delay-2" type="button">Scale down</button>
</div>
</div>
<div>
<div class="bg-faded-success text-center py-5 px-3">
<h3 class="from-start">From left to right</h3>
<p class="fs-lg mb-4 pb-3 from-end">From right to left</p>
<button class="btn btn-success scale-up delay-2" type="button">Scale up</button>
</div>
</div>
</div>
</div>// Fade transition + Layer animations
.tns-carousel
.tns-carousel-inner(data-carousel-options = '{"mode": "gallery", "nav": false}')
div
.bg-faded-primary.text-center.py-5.px-3
h3.from-top From top to bottom
p.fs-lg.mb-4.pb-3.from-bottom.delay-1 From bottom to top
button(type="button").btn.btn-primary.scale-down.delay-2
| Scale down
div
.bg-faded-success.text-center.py-5.px-3
h3.from-start From left to right
p.fs-lg.mb-4.pb-3.from-end From right to left
button(type="button").btn.btn-success.scale-up.delay-2
| Scale up