当前位置：首页 > 行业动态 > 正文

html图片扇形滚动

admin
行业动态
2025-05-08
3

HTML图片扇形滚动需结合CSS定位与JS控制，通过绝对定位设置图片角度，配合transform旋转及

实现原理

通过CSS圆形布局与JavaScript控制图片位置，模拟扇形展开效果,结合定时器或事件触发实现滚动切换。

html图片扇形滚动第1张

结构设计

<div class="fan-container">
  <div class="fan-item" style="transform: rotate(0deg) translate(150px) rotate(0deg)">
    <img src="image1.jpg" alt="">
  </div>
  <div class="fan-item" style="transform: rotate(60deg) translate(150px) rotate(-60deg)">
    <img src="image2.jpg" alt="">
  </div>
  <!-其他图片项 -->
</div>
<button class="prev">上一张</button>
<button class="next">下一张</button>

样式定义

属性	说明
`position: relative`	容器相对定位
`width/height: 300px`	定义圆形直径
`transform-origin: center`	设置旋转中心点
`transition: transform 0.5s`	添加平滑过渡
`border-radius: 50%`	圆形布局基础

核心代码

.fan-container {
  position: relative;
  width: 300px;
  height: 300px;
  transform-origin: center;
}
.fan-item {
  position: absolute;
  width: 100px;
  height: 150px;
  left: 50%;
  top: 50%;
  transform-origin: bottom;
  transition: transform 0.5s;
}

let current = 0;
const items = document.querySelectorAll('.fan-item');
document.querySelector('.next').addEventListener('click', () => {
  current = (current + 1) % items.length;
  updatePosition();
});
document.querySelector('.prev').addEventListener('click', () => {
  current = (current 1 + items.length) % items.length;
  updatePosition();
});
function updatePosition() {
  items.forEach((item, index) => {
    const angle = 360 / items.length  (index current);
    item.style.transform = `rotate(${angle}deg) translate(150px) rotate(-${angle}deg)`;
  });
}
updatePosition(); // 初始化位置