如何使无限翻转下面的代码？ [英] How to make infinite flip out of the code below?

问题描述

如何调整此链接中的翻转JavaScript

复制和编辑的答复

How to tweak the flip javascript in this link http://desandro.github.io/3dtransforms/docs/card-flip.html so that it will flip to the third content or won't referse flip to the first content

var init = function() {
    var card = document.getElementById('card');

    document.getElementById('flip').addEventListener( 'click', function(){
        card.toggleClassName('flipped');
    }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

解决方案

The contents of each element should be stored separately in the HTML, and retrieved when needed.

<div class="container">
    <div class="card">
        <div class="face face1"></div>
        <div class="face face2"></div>
    </div>

    <ul class="store">
        <li>
            <div class="content content1">1</div>
        </li>
        <li>
            <div class="content content2">2</div>
        </li>
        <li>
            <div class="content content3">3</div>
        </li>
        <li>
            <div class="content content4">4</div>
        </li>
    </ul>
</div>  

Answer copied and edited from

这篇关于如何使无限翻转下面的代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！