3d輪播圖——相似酷狗的輪播

時間 2019-11-09

標籤 3d 相似简体版

原文原文鏈接

說到輪播圖，其實只要是跟web開發相關的不管是前端後端應該都不陌生，各類各樣的輪播圖，從之前的單純的平面山水畫遮蓋滑動或滾動，到Jquery的animate甚至是h5+css3，各類炫酷的輪播圖更是層出不窮，其實它們看着都很炫酷，但實際實現的原理很簡單，咱們來試着扒一扒看看：javascript

如下我要說的輪播圖呢，是這樣的：css

那具體是怎麼實現的呢？html

先給你看張圖，看似很炫酷的輪播圖實際上的這樣的：前端

或者說是這樣的：java

好了，它跟以往的拖ul或上浮下沉不一樣，它最大的特色是樣式是被保存起來了，再在下一個規定好的時間幀讀，只不過這時候不是a來讀a，而是a的上一個或下一個咱先稱之爲b吧來讀a的屬性，看到這裏你會問了，須要哪些屬性呢？其實你應該很快就能夠看出來，都分別是什麼呢？寬高？還有嗎？top,left？還有嗎？透明度？還有嗎？垂直於咱們電腦屏幕的z軸？是的，其實也就這些，沒其餘的了。jquery

不上代碼你確定又以爲我是忽悠你的了，咱來上代碼：css3

htmlweb

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿酷狗輪播組件jq版本</title>
    <link rel="stylesheet" href="../css/kugou_lunbo.css">
    <script type="text/javascript" src="../../jquery-3.2.1.min.js"></script>
    <!--<script type="text/javascript" src="../js/kugou_lunbo.js"></script>-->
    <script src="../js/dc_carousel.js" type="text/javascript"></script>
</head>
<body>
<div class="dc_carousel" id="dc_carousel">
    <div class="dc_carousel_img"><!--這個是放圖片的-->
        <ul>
            <li class="first">1</li>
            <li class="second">2</li>
            <li class="third">3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li class="second_last">9</li>
            <li class="last">10</li>
        </ul>
    </div>
    <div class="dc_carousel_point"><!--這個是圖片對應小圓點的-->
        <ul>
            <li class="current_point"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <span class="previous dc_left"></span><!--左右按鈕-->
    <span class="next dc_right"></span>
</div>
</body>
</html>

cssjson

html,body,div,ol,ul,li,p,h1,h2,h3,h4,h5,h6,table,dt,dd,span,input{margin:0;padding:0}ul,li{list-style:none}a{text-decoration:none}.dc_left{float:left}.dc_right{float:right}.dc_clear{content:"";display:block;clear:both}.dc_carousel{width:900px;height:400px;margin:100px auto;box-shadow:0 0 5px #333;-webkit-box-shadow:0 0 5px #333;-moz-box-shadow:0 0 5px #333;-o-box-shadow:0 0 5px #333;position:relative}.dc_carousel .dc_carousel_img{width:100%;height:90%;position:relative}.dc_carousel .dc_carousel_img li{position:absolute;font:100px 楷體;background:#333}.dc_carousel .dc_carousel_img .first{width:70%;height:100%;opacity:1;filter:alpha(opacity=100);text-align:center;background:#f00;left:15%;z-index:10}.dc_carousel .dc_carousel_img .second{width:49%;height:70%;opacity:1;filter:alpha(opacity=100);text-align:right;background:#00f;top:15%;left:51%;z-index:9}.dc_carousel .dc_carousel_img .third{width:30%;height:40%;background:#ff0;top:30%;left:100%;z-index:8}.dc_carousel .dc_carousel_img .last{width:49%;height:70%;opacity:1;filter:alpha(opacity=100);background:#00f;top:15%;z-index:9}.dc_carousel .dc_carousel_img .second_last{width:30%;height:40%;background:#ff0;top:30%;left:-30%;z-index:8}.dc_carousel .dc_carousel_point{width:100%;height:auto;z-index:30;text-align:center}.dc_carousel .dc_carousel_point li{width:10px;height:10px;background:#333;border-radius:50% 50% 50% 50%;-webkit-border-radius:50% 50% 50% 50%;-moz-border-radius:50% 50% 50% 50%;display:inline-block;cursor:pointer}.dc_carousel .dc_carousel_point .current_point{background:#3ff}.dc_carousel span{width:40px;height:40px;top:37%;position:absolute;z-index:55;opacity:1;cursor:pointer}.dc_carousel .next{border-right:10px solid #1aa0ff;border-top:10px solid #1aa0ff;transform:rotateZ(45deg);box-sizing:border-box;right:10px}.dc_carousel .previous{border-left:10px solid #1aa0ff;border-top:10px solid #1aa0ff;transform-origin:20px 20px;transform:rotateZ(-45deg);box-sizing:border-box;left:10px}

jscanvas

/**
 * Created by Administrator on 2018/5/3 0003.
 */
$(function(){
    var dc_left=$(".previous");
    var dc_right=$(".next");
    var dc_img=$(".dc_carousel_img li");
    var dc_point=$(".dc_carousel_point li");

    var dc_w=[],dc_h=[],dc_t=[],dc_l=[],dc_o=[],dc_z=[];//這裏用了很多數組，其實能夠存成一個對象，代碼看起來會更好看一些。
    function slide(flag){
        //存樣式（屬性）
        dc_img.each(function(i){
            dc_w[i]=$(this).css("width");
            dc_h[i]=$(this).css("height");
            dc_t[i]=$(this).css("top");
            dc_l[i]=$(this).css("left");
            dc_o[i]=$(this).css("opacity");
            dc_z[i]=$(this).css("zIndex");
        });
        //取樣式（屬性）
        dc_img.each(function(i){
            if(flag){
                var a=i+1;
                a%=dc_img.length;//有的人應該喜歡寫成a>=dc_img.length?a=0:null;吧？嘿嘿，你看哪一個簡單？只是js畢竟只是一門10天創造出來的語言，對數據類型的定義比較不嚴謹，
                                 //其實不只僅取餘，異或，同或等等在數據的處理上也有很大的妙用，這裏算小試牛刀了。
            }
            else{
                var a=i-1;
                a<0?a=dc_img.length-1:a;
            }
            $(this).css("zIndex",dc_z[a]).animate({
                width:dc_w[a],
                height:dc_h[a],
                left:dc_l[a],
                top:dc_t[a],
                opacity:dc_o[a]
            },400);
        })
    }
    var time=setInterval(function(){
        slide(1);
    },2000);
});

固然啦，這個只是初級版，爲何這麼說呢？你說沒按鈕功能啊？爲啥要按鈕功能呢？按鈕功能不必，對你理解原理上的東西沒幫助，這種讀寫樣式的方式，配合動畫不只僅作輪播，canvas那些也有很強大的應用的，咱們理解它的原理了，不少東西也跟着通了，不但願的是過來黏貼下代碼，有個demo出來交差但實際上只知其一;不知其二，這樣就沒意思了。

總結一下吧：這個輪播呢？能夠大體分紅幾部分來完成：

第一步：遍歷咱們放圖片那一組元素（能夠是li，也能夠是其餘），把咱們要的那些屬性（上面那個）給取下來。這以前呢，咱們是先要經過css把相應的樣式設置好，這樣以便於後面獲取。

第二步：取到的元素放在定義好的數組內（對象也行，相似json那樣），再把每一個數組裏的屬性賦回去（記住賦回去以後，又像以前讀取同樣，再把全部的值讀下來,this是個好東西呵呵，你不用再去複雜的設置指針，這兩步是最關鍵的），但這時候就不是a賦給a了，賦給b或者c，相信這個選擇器的知識我就不說了吧？不懂也能夠看上面代碼。

第三步：開一個定時器，其實開不開沒所謂，我只是須要一個觸發條件，就是何時你要把數組的值賦回去？你不說或者不定義，程序不知道啊，因此僅僅算是一個觸發條件，你也能夠用個點擊事件也行。

第四步：這個第4步無關緊要，只不過因爲開頭是說的3d動畫輪播，這裏不說下動畫有點說不過去，用jq的animate是比較方便快捷的，固然有個很差的地方是animate動畫變更的那一段時間你是作不了啥事的(會有顯示bug的，固然也有解決辦法，只不過目前想到的這個解決辦法不太滿意，沒有從根本上解決delay這個東西，js是異步的，定時器那些也不會有這個同步的東西在阻塞你，不用去管，只需明白上面的原理便可，扯遠了...)。

但願各位有所收穫！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。