jQuery自适应-3D旋转轮播图

番茄西红柿发布于2019-04-23 13:18 / 2660人阅读

摘要：旋转轮播图本例源于站长之家实例其他相似示例自己研究重写了一遍。我用的是的大小一致的张图片，代码可拓展为三张四张甚至大于五张。如图是静态效果图后的代码是静态时的样式和。计算得出向左向右二然后，编写动态交互效果。

3D旋转轮播图

本例源于（站长之家实例http://sc.chinaz.com/jiaoben/170215391070.htm）

其他相似示例（https://www.cnblogs.com/incredible-x/p/9688333.html）

自己研究重写了一遍。

一、先写静态的初始样式的css和html。我用的是 550x300的大小一致的 5张图片，代码可拓展为三张、四张、甚至大于五张。如图是静态效果：

图后的代码是静态时的样式html和css。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
    <style>
    * { margin: 0; padding: 0;word-break: break-all; }
    a { color:#fff;text-decoration: none;}
    a:hover { text-decoration: none;}
    ul,li { list-style: none;}
    html,body{width: 100%;height: 100%;}
    .main {max-width: 800px; margin: 0 auto;}
    #slide {width: 100%;height: 420px;position: relative;overflow: hidden;}
    #slide .pic { position: absolute; }
    #slide .pic img {width: calc(100% - 14px);height: calc(100% - 14px);}
    #slide .p1 { z-index: 3;width: 40%;height: 40%;left: -50%;top: 30%;}
    #slide .p2 { z-index: 4;width: 60%;height: 60%;left: -20%;top: 20%;}
    #slide .p3 {z-index: 5; width: 80%;height: 80%; left: 10%;top: 10%;}
    #slide .p4 { z-index: 4; width: 60%; height: 60%; left: 60%; top: 20%;}
    #slide .p5 { z-index: 3; width: 40%;height: 40%; left: 110%; top: 30%;}
    #slide .btn {
         position: absolute;
        z-index: 6;
        bottom: 20%;
        width: 180px;  /* 计算得出 5*30+5*6=180 */
        margin-left: -90px;
        left: 50%;
    }
    #slide .btn span {
        width: 24px;
        height: 8px;
        border-radius: 3px;
        float: left;
        background-color: #dedede;
        margin: 0 3px;
    }
    #slide .btn .on {background-color: #ffd200; }

    style>
head>

<body>
    <div class="main">
        <div id="slide" class="slide">
            <div class="pic"><img src="./images/1.png">div>
            <div class="pic"><img src="./images/2.png">div>
            <div class="pic"><img src="./images/3.png">div>
            <div class="pic"><img src="./images/4.png">div>
            <div class="pic"><img src="./images/5.png">div>
            <div class="btn">
                
            div>
        div>
        <button class="btn-prev">向左button>
        <button class="btn-next">向右button>
    div>
body>
html>

View Code

二、然后，js编写动态交互效果。这段是js代码（要引入jQuery库）

备注还比较详细，一和二的代码直接复制就可以运行。

View Code

效果如下图：只显示三张，太多图的话，手机移动端显示不下

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1691.html

【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
写jquery插件【轮播图】历程

摘要：轮播图插件的任务已经接近尾声，在书写轮播图期间确实有一些小的感触的。轮播图插件的任务已经接近尾声，在书写轮播图期间确实有一些小的感触的。感兴趣的可以访问我的轮播图的线上地址:轮播图首先，轮播图插件其实并不是我第一次写，之前也写过，不过那时候是按照别人的思路写下来的，算起来大概有一年了，这次又一次开始轮播图是因为拜读了《单页面Web应用 JavaScript从前端到后端》的这本书的1...

khlbat 2019-08-21 11:21 评论0 收藏0
写jquery插件【轮播图】历程

摘要：轮播图插件的任务已经接近尾声，在书写轮播图期间确实有一些小的感触的。轮播图插件的任务已经接近尾声，在书写轮播图期间确实有一些小的感触的。感兴趣的可以访问我的轮播图的线上地址:轮播图首先，轮播图插件其实并不是我第一次写，之前也写过，不过那时候是按照别人的思路写下来的，算起来大概有一年了，这次又一次开始轮播图是因为拜读了《单页面Web应用 JavaScript从前端到后端》的这本书的1...

snowLu 2019-08-01 16:07 评论0 收藏0
小白成长日记：一步一步写个轮播图插件

摘要：并不是所有人写的代码或者插件都适合小白使用，比如这是一个的滚动插件，大多数人使用了之后发现滚动不了，去作者提，其实是他们并不懂滚动的原理。最近在这里看了一篇关于面试的文章《回顾自己三次失败的面试经历》，作者三次倒在了轮播图上。囧，所以我也写个轮播图看看。这次是用jQuery写的，因为最近一直在研究jQuery插件的写法，所以用jQuery写的，而且我发现，我vue用太多，完全不熟悉d...

notebin 2019-08-22 11:15 评论0 收藏0