10图! Bluenote官方LIVE REPORT 歌单
<br>SETLIST<br>
1st & 2nd<br>
<br>
1.ALWAYS<br>
2.ピアス<br>
3.BLACK&BLUE<br>
4.花束<br>
5.FIND THE WAY~ 桜色舞うころ ~ ORION<br>
6.僕が死のうと思ったのは<br>
7.流れ星<br>
8.TRUST YOUR VOICE<br>
9.汚れた花<br>
EC1.あまのじゃく<br>
EC2.雪の華<br><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/* === 包裹器，允许导航点和箭头外露 === */
.carousel-wrapper{
width: 100%;
overflow: visible;
}
.carousel{
position: relative;
width: 100%;
overflow: hidden;
font-size: 0;
}
/* === 轨道 === */
.carousel-track{
display: flex;
transition: transform .5s ease;
}
.carousel-track > *{
flex: 0 0 100%;
max-width: 100%;
}
.carousel-track img{
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
/* === 箭头（半透明灰色，自动隐藏） === */
.carousel-arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(128,128,128,0.5);
border: none;
font-size: 2rem;
cursor: pointer;
padding: 0.2em 0.5em;
z-index: 2;
opacity: 0;
transition: opacity .3s ease;
}
/* 鼠标悬停时显示箭头 */
.carousel:hover .carousel-arrow{
opacity: 1;
}
.carousel-arrow.prev{ left: 10px; }
.carousel-arrow.next{ right: 10px; }
/* === 原点导航（图片外侧） === */
.carousel-dots{
margin: 10px auto 0;
display: flex;
justify-content: center;
gap: 6px;
}
.carousel-dots button{
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background: #ccc;
cursor: pointer;
padding: 0;
}
.carousel-dots button.active{ background: #333; }
</style>
</head>
<body>
<div class="carousel-wrapper">
<div class="carousel" id="carousel">
<div class="carousel-track">
</div>
<button class="carousel-arrow prev">❮</button>
<button class="carousel-arrow next">❯</button>
</div>
<div id="carousel-dots" class="carousel-dots"></div>
</div>
<script>
(function(){
const carousel = document.getElementById('carousel');
const track = carousel.querySelector('.carousel-track');
const items = track.children;
const total = items.length;
let index = 0;
let timer;
let startX = 0, moveX = 0;
const dotsContainer = document.getElementById('carousel-dots');
// 生成原点
for(let i=0;i<total;i++){
const b = document.createElement('button');
if(i===0) b.classList.add('active');
b.addEventListener('click', ()=>goTo(i));
dotsContainer.appendChild(b);
}
const dots = dotsContainer.querySelectorAll('button');
// 切换函数
function goTo(i){
index = (i + total) % total;
track.style.transform = `translateX(-${100*index}%)`;
dots.forEach((d,j)=> d.classList.toggle('active', j===index));
}
// 自动播放
function startAuto(){ timer = setInterval(()=>goTo(index+1), 3000); }
function stopAuto(){ clearInterval(timer); }
startAuto();
// 箭头
carousel.querySelector('.carousel-arrow.prev')
.addEventListener('click', ()=> { goTo(index-1); stopAuto(); startAuto(); });
carousel.querySelector('.carousel-arrow.next')
.addEventListener('click', ()=> { goTo(index+1); stopAuto(); startAuto(); });
// 触摸滑动支持
carousel.addEventListener('touchstart', e => {
startX = e.touches.clientX;
stopAuto();
});
carousel.addEventListener('touchmove', e => {
moveX = e.touches.clientX - startX;
const percent = (moveX / carousel.clientWidth) * 100;
track.style.transform = `translateX(-${100*index - percent}%)`;
});
carousel.addEventListener('touchend', e => {
if(moveX > 50) goTo(index-1);
else if(moveX < -50) goTo(index+1);
else goTo(index);
moveX = 0;
startAuto();
});
// 悬停暂停
carousel.addEventListener('mouseenter', stopAuto);
carousel.addEventListener('mouseleave', startAuto);
})();
</script>
</body>
</html>
<br>
来源：https://www.bluenote.co.jp/jp/reports/2024/12/31/mika-nakashima-live-at-blue-note-tokyo-2024.html
页:
[1]