JS实现3D轮播图样式

原创

于 2019-10-26 20:06:24 发布 · 4.5k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#JS #轮播图 #html #css #前端

本文介绍如何利用JavaScript、HTML和CSS创建3D轮播图，展示5张图片自动播放及点击居中显示的功能。源代码可在GitHub上获取，CSS通过transform-style属性实现3D效果，JS部分则着重处理图片的定位和切换。

3D轮播图

在这里插入图片描述
实现5个图片自动播放，以及点击图片将其展现在正中央。
源代码获取：
https://github.com/akh5/web/tree/master/3D%E8%BD%AE%E6%92%AD%E5%9B%BE

HTML只提供了背景容器，用于放置5张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D轮播图</title>
    <link href="wrapper.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="wrapper">
        <img class="image" src="imag/1.jpg">
        <img class="image" src="imag/2.jpeg">