jQuery自適應-3D旋轉輪播圖

番茄西紅柿發布于2019-04-23 13:18 / 2700人閱讀

摘要：旋轉輪播圖本例源于站長之家實例其他相似示例自己研究重寫了一遍。我用的是的大小一致的張圖片，代碼可拓展為三張四張甚至大于五張。如圖是靜態效果圖后的代碼是靜態時的樣式和。計算得出向左向右二然后，編寫動態交互效果。

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

效果如下圖：只顯示三張，太多圖的話，手機移動端顯示不下

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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