3D旋转轮播图

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

自制的jQuery插件：3D-slider

演示demo地址：3D旋转轮播图演示

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

功能

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

快速开始

CSS样式

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

HTML结构

1
2
3
4
5
6
<!-- #替换成想要跳转的地址 -->
<div id="wrapper" class="wrapper">
    <a href="#"><img src="https://jeffrey-0.github.io/3D-slider/img/1.jpg" alt="火影"></a>
    <a href="#"><img src="https://jeffrey-0.github.io/3D-slider/img/2.jpg" alt="海贼王"></a>
    <a href="#"><img src="https://jeffrey-0.github.io/3D-slider/img/3.jpg" alt="全职高手"></a>
</div>

JS脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- 引入jquery -->
<script type="text/javascript" src="https://jeffrey-0.github.io/3D-slider/jquery.min.js"></script>
<!-- 引入slider插件 -->
<script type="text/javascript" src="https://jeffrey-0.github.io/3D-slider/3D-slider.js"></script>
<!-- 使用slider插件 -->
<script>
      if (screen.width > 767 ) {
        // 适配pc端
        $('#wrapper').slider({
          curDisplay: 0, // 当前显示第n张图片
          autoPlay: true, // 是否自动轮播
          interval: 2000, // 轮播的时间，单位：毫秒
          translateX: 200, // 图片向俩边平移的距离，单位：px
          translateZ: 300, // 图片向前平移的距离，单位：px
          rotateY: 30  // 图片的偏移角度，单位：deg
        })
      } else {
        // 适配手机端
        $('#wrapper').slider({
          curDisplay: 0,
          autoPlay: true,
          interval: 2000,
          translateX: 50,
          translateZ: 100,
          rotateY: 30
        })
      }
  </script>

第二种：建议下载本项目3D旋转轮播图到本地，再引入，节省时间

选项

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

选项 类型 默认 描述
curDisplay Number 0 当前显示第n张图片
autoPlay Boolean true 是否自动轮播
interval Number 2000 轮播的时间，单位：毫秒
translateX Number 200 图片向俩边平移的距离，单位：px
translateZ Number 300 图片向前平移的距离，单位：px
rotateY Number 30 图片的偏移角度，单位：deg

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

兼容性