Case summary of 3D carousel

 

 

Train of thought:

First, build a box, then cut the long box into many li, then each li has four faces (represented by div), and then use background position-x

Attribute translates the image by different distances to make a complete image, and then sets the rotation time of each li to a different amount, forming the effect of wave reversal

 

 

1.document.querySelectorAll()

The querySelectorAll() method returns all elements in the document that match the specified CSS selector NodeList Object.

The NodeList object represents a collection of nodes. It can be accessed through the index, with the index value starting from 0.

 

2.window.getComputedStyle

The getComputedStyle() method is used to get the CSS style of the specified element.

The style obtained is the style of the final rendering effect of the element in the browser.

grammar

window.getComputedStyle(element, pseudoElement)

Parameter Description:

  • Element: required, to get the element of the style.
  • Pseudo element: optional, pseudo class element. null can be ignored or passed in when pseudo class element is not queried.

 

3.transform-origin

This is the rotation point of rotation. There is a good article about this: transform-origin

 

Code:

<!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>Document</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0;
        box-sizing: border-box;

    }

    li {
        list-style: none;
    }

    .solid {
        width: 800px;
        height: 360px;
        margin: 150px auto;
        box-shadow: 1px 7px 25px #fd8fd9;
    }

    .solid ul {
        height: 100%;
        z-index: 1;
    }

    .solid ul li {
        position: relative;
        float: left;
        transform-style: preserve-3d;
        width: 8px;
        height: 100%;
    }

    .solid ul li div {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .solid ul li div:nth-child(1) {
        background: url('./image/1.jpg');
        transform:rotateX(90deg) translateZ(180px) ;
    }

    .solid ul li div:nth-child(2) {
        background: url('./image/2.jpg');
        transform:  rotateX(-90deg) translateZ(180px);
    }

    .solid ul li div:nth-child(3) {
        background: url('./image/3.jpg');
        transform: translateZ(180px);
    }

    .solid ul li div:nth-child(4) {
        background: url('./image/4.jpg');
        transform: translateZ(-180px) rotateX(180deg);
    }
    .solid ol{
        z-index: 9999;
        margin:5px auto;
        width: 50%;
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        height: 50px;
    }
    .solid ol li{
        float: left;
        width: 25px;
        height: 25px;
        background-color: gray;
        text-align: center;
        border-radius: 50%;
    }
    .solid ol li:hover{
        cursor: pointer;
        box-shadow: 2px 2px 5px;
    }
    .solid ol li.on{
        background-color: red;
    }
</style>

<body>
    <div class="solid">
        <ul class="oUl">
        </ul>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
</body>
<script src="demo.js"></script>

</html>
//Create elements
var solid = document.getElementsByClassName("solid")[0];
var oUl = document.getElementsByClassName("oUl")[0];
var css = document.getElementsByTagName("style")[0];
var n;
var btn = document.querySelectorAll('ol li');//Choice
createDom();
function createDom() {
    var len = 100;//Create 100 li
    var uHtml = "";
    var pHtml = "", tHtml = "";
    var allWidth = parseInt(window.getComputedStyle(solid, null).width);//Calculate total width
    var widthLi = allWidth / len;
    for (var i = 0; i < len; i++) {
        uHtml += "<li><div></div><div></div><div></div><div></div></li>";
        pHtml += '.solid ul li:nth-child(' + (i + 1) + ') div{background-position-x:' + (-i * widthLi) + 'px;background-size: cover;}';
        tHtml+='.solid ul li:nth-child(' + (i + 1) + '){transition:'+(0.8+0.3*i/len)+'s;}';
    }
    oUl.innerHTML = uHtml;
    css.innerHTML += pHtml;
    css.innerHTML+=tHtml;
    bindEvent();
    play();
}
function bindEvent() {
    for (var i = 0; i < 4; i++) {
        btn[i].index = i;
        btn[i].onclick = function () {
            n = this.index;
            for (var i = 0; i < 4; i++) {//x first clear the class of all serial numbers
                btn[i].className = '';
            }
            this.className = 'on';
            css.innerHTML += '.solid ul li{transform:rotateX(' + n * 90 + 'deg)}';
        }
    }
}

 

Tags: Attribute IE

Posted on Mon, 06 Jan 2020 17:21:30 -0500 by andrei.mita