3D炫酷旋转相册

发表于2020-05-23更新于2020-05-23

演示demo地址：3D炫酷旋转相册演示

项目地址：3D炫酷旋转轮播图

功能

  • 3D旋转效果
  • 自动轮播
  • 鼠标拖动切换视角
  • 点击当前图片跳转链接
  • 自适应各种图片（最大等比例+居中裁切）

快速开始

CSS样式

1
<link rel="stylesheet" type="text/css" href="https://jeffrey-0.github.io/3D-photo/index.css">

HTML结构

1
2
3
4
5
6
<div id="container">
    <div class="wrap">
      <a href="img/1.jpg" ><img src="img/1.jpg" alt=""></a>
      <a href="img/2.jpg" ><img src="img/2.jpg" alt=""></a>
    </div>
  </div>

JS脚本

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="https://jeffrey-0.github.io/3D-photo/index.js"></script>
<script type="text/javascript">
  var container = document.getElementById('container')
  photo3D(container, {
    isAutoPlay: true, // 是否自动轮播
    interTime: 1000, // 轮播时间,单位:ms
    rotateX: -20, // 初始沿x轴翻转角度,单位:deg
    rotateY: 0 // 初始沿y轴翻转角度,单位:deg
  })
</script>

选项

这些选项均有默认值，可根据自己喜好配置不同值

选项 类型 默认 描述
isAutoPlay Boolean true 是否自动轮播
interTime Number 1000 轮播的时间，单位：毫秒
rotateX Number -20 初始沿x轴翻转角度,单位:deg
rotateY Number 0 初始沿y轴翻转角度,单位:deg

如果你不想要点击当前图片跳转链接，可以设置a标签中的href为javascript:;

兼容性

  • 兼容Chrome、Opera