我想知道如何在此代码的每个框的底部添加新文本:
https://codepen.io/sub0-l3/pen/xjPwBP
我想明确地说,我不想在框内而是在框下输入新文本。每个框都有不同的文本。因此,基本上,当您按向左或向右箭头时,它将在框旁边显示新的下一个。谢谢!
function shiftLeft() {
const boxes = document.querySelectorAll(".box");
const tmpNode = boxes[0];
boxes[0].className = "box move-out-from-left";
setTimeout(function() {
if (boxes.length > 5) {
tmpNode.classList.add("box--hide");
boxes[5].className = "box move-to-position5-from-left";
}
boxes[1].className = "box move-to-position1-from-left";
boxes[2].className = "box move-to-position2-from-left";
boxes[3].className = "box move-to-position3-from-left";
boxes[4].className = "box move-to-position4-from-left";
boxes[0].remove();
document.querySelector(".cards__container").appendChild(tmpNode);
}, 500);
}
function shiftRight() {
const boxes = document.querySelectorAll(".box");
boxes[4].className = "box move-out-from-right";
setTimeout(function() {
const noOfCards = boxes.length;
if (noOfCards > 4) {
boxes[4].className = "box box--hide";
}
const tmpNode = boxes[noOfCards - 1];
tmpNode.classList.remove("box--hide");
boxes[noOfCards - 1].remove();
let parentObj = document.querySelector(".cards__container");
parentObj.insertBefore(tmpNode, parentObj.firstChild);
tmpNode.className = "box move-to-position1-from-right";
boxes[0].className = "box move-to-position2-from-right";
boxes[1].className = "box move-to-position3-from-right";
boxes[2].className = "box move-to-position4-from-right";
boxes[3].className = "box move-to-position5-from-right";
}, 500);
}
html {
font-size: 16px;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-family: "Lato", sans-serif;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
}
.button {
margin-left: 0 3%;
width: 2rem;
cursor: pointer;
}
.button--inactive {
opacity: 0.2;
}
.button img {
width: 60%;
}
.cards-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.cards__container {
display: flex;
align-items: center;
justify-content: center;
height: 25rem;
}
.box {
/* margin: -1.5rem; */
width: 12rem;
height: 20rem;
box-shadow: 0px 0px 2rem 0px #888888;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
position: relative;
/* transition: 1s all; */
}
.box:nth-child(2n) {
transform: scale(0.85);
z-index: -1;
}
.box:nth-child(2) {
left: 5%;
}
.box:nth-child(4) {
left: -5%;
}
.box:nth-child(4n + 1) {
transform: scale(0.75);
z-index: -2;
}
.box:nth-child(1) {
left: 15%;
}
.box:nth-child(5) {
left: -15%;
}
.card__text-content {
text-align: center;
width: 75%;
}
.card__title {
padding: 1rem;
}
.box--hide {
display: none;
}
.move-out-from-left {
animation: moveOutLeft 0.5s ease-in-out;
}
.move-out-from-right {
animation: moveOutRight 0.5s ease-in-out;
}
.move-to-position5-from-left {
animation: moveToP5Left 0.5s ease-in-out;
}
.move-to-position4-from-left {
animation: moveToP4Left 0.5s ease-in-out;
}
.move-to-position3-from-left {
animation: moveToP3Left 0.5s ease-in-out;
}
.move-to-position2-from-left {
animation: moveToP2Left 0.5s ease-in-out;
}
.move-to-position1-from-left{
animation: moveToP1Left 0.5s ease-in-out;
}
.move-to-position5-from-right{
animation: moveToP5Right 0.5s ease-in-out;
}
.move-to-position4-from-right{
animation: moveToP4Right 0.5s ease-in-out;
}
.move-to-position3-from-right{
animation: moveToP3Right 0.5s ease-in-out;
}
.move-to-position2-from-right{
animation: moveToP2Right 0.5s ease-in-out;
}
.move-to-position1-from-right{
animation: moveToP1Right 0.5s ease-in-out;
}
@keyframes moveOutLeft {
0% {
transform: scale(0.75) translateX(0%);
opacity: 1;
}
50% {
transform: scale(0.5) translateX(-150%);
opacity: 0.5;
}
100% {
transform: scale(0.25) translateX(0%);
opacity: 0;
}
}
@keyframes moveOutRight {
0% {
transform: scale(0.75) translateX(0%);
opacity: 1;
}
50% {
transform: scale(0.5) translateX(150%);
opacity: 0.5;
}
100% {
transform: scale(0.25) translateX(0%);
opacity: 0;
}
}
@keyframes moveToP5Left {
from {
transform: scale(0.75) translateX(100%);
}
to {
transform: scale(0.75) translateX(0);
}
}
@keyframes moveToP4Left {
from {
transform: scale(0.75) translateX(100%);
}
to {
transform: scale(0.85) translateX(0);
}
}
@keyframes moveToP3Left {
from {
transform: scale(0.85) translateX(100%);
}
to {
transform: scale(1) translateX(0);
}
}
@keyframes moveToP2Left {
from {
transform: scale(1) translateX(100%);
}
to {
transform: scale(0.85) translateX(0);
}
}
@keyframes moveToP1Left {
from {
transform: scale(0.85) translateX(100%);
}
to {
transform: scale(0.75) translateX(0);
}
}
@keyframes moveToP1Right {
from {
transform: scale(0.75) translateX(-100%);
}
to {
transform: scale(0.75) translateX(0);
}
}
@keyframes moveToP2Right {
from {
transform: scale(0.75) translateX(-100%);
}
to {
transform: scale(0.85) translateX(0);
}
}
@keyframes moveToP3Right {
from {
transform: scale(0.85) translateX(-100%);
}
to {
transform: scale(1) translateX(0);
}
}
@keyframes moveToP4Right {
from {
transform: scale(1) translateX(-100%);
}
to {
transform: scale(0.85) translateX(0);
}
}
@keyframes moveToP5Right {
from {
transform: scale(0.85) translateX(-100%);
}
to {
transform: scale(0.75) translateX(0);
}
}
<head>
<title>3d-carousal</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="button" onclick="shiftLeft()"><img src="https://image.ibb.co/mRsEb7/left_arrow.png" alt=""></div>
<div class="cards-wrapper">
<ul class="cards__container">
<li class="box" style="background-color:red">box 1
</li>
<li class="box">box 2</li>
<li class="box">box 3</li>
<li class="box">box 4</li>
<li class="box">box 5</li>
<li class="box box--hide">box 6</li>
<li class="box box--hide">box 7</li>
</ul>
<div class="card__text-content">
<h3 class="card__title">The Famous Five</h3>
<div class="card__summary">The Famous Five is a series of children's adventure novels written by English author Enid Blyton. The first book, Five on a Treasure Island, was published in 1942.</div>
</div>
</div>
<div class="button" onclick="shiftRight()"><img src="https://image.ibb.co/dfPSw7/right_arrow.png" alt=""></div>
</div>
<script src='js/index.js'></script>
</body>
最佳答案
有很多方法可以做到这一点(jQuery数据绑定,Vue.js,React.js),但是如果您想使用纯JavaScript的简单方法,就是这样:
为每个框设置ID,例如box1
box2
boxn
...
每个框都有其对应的card__text-content
,其ID为databox1
databox2
...
使用居中框显示或隐藏相应的card__text-content
showBoxData('box3');
function shiftLeft() {
const boxes = document.querySelectorAll(".box");
const tmpNode = boxes[0];
boxes[0].className = "box move-out-from-left";
setTimeout(function() {
if (boxes.length > 5) {
tmpNode.classList.add("box--hide");
boxes[5].className = "box move-to-position5-from-left";
}
boxes[1].className = "box move-to-position1-from-left";
boxes[2].className = "box move-to-position2-from-left";
boxes[3].className = "box move-to-position3-from-left";
boxes[4].className = "box move-to-position4-from-left";
boxes[0].remove();
document.querySelector(".cards__container").appendChild(tmpNode);
}, 500);
showBoxData(boxes[3].id);
}
function shiftRight() {
const boxes = document.querySelectorAll(".box");
boxes[4].className = "box move-out-from-right";
setTimeout(function() {
const noOfCards = boxes.length;
if (noOfCards > 4) {
boxes[4].className = "box box--hide";
}
const tmpNode = boxes[noOfCards - 1];
tmpNode.classList.remove("box--hide");
boxes[noOfCards - 1].remove();
let parentObj = document.querySelector(".cards__container");
parentObj.insertBefore(tmpNode, parentObj.firstChild);
tmpNode.className = "box move-to-position1-from-right";
boxes[0].className = "box move-to-position2-from-right";
boxes[1].className = "box move-to-position3-from-right";
boxes[2].className = "box move-to-position4-from-right";
boxes[3].className = "box move-to-position5-from-right";
}, 500);
showBoxData(boxes[1].id);
}
function showBoxData(boxId) {
// hide all data
document.querySelectorAll(".card__text-content").forEach(function(node) {
if('data' + boxId !== node.id){
node.style.display = 'none';
}
else{
node.style.display = 'block';
}
})
}
html {
font-size: 16px;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-family: "Lato", sans-serif;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
}
.button {
margin-left: 0 3%;
width: 2rem;
cursor: pointer;
}
.button--inactive {
opacity: 0.2;
}
.button img {
width: 60%;
}
.cards-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.cards__container {
display: flex;
align-items: center;
justify-content: center;
height: 25rem;
}
.box {
/* margin: -1.5rem; */
width: 12rem;
height: 20rem;
box-shadow: 0px 0px 2rem 0px #888888;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
position: relative;
/* transition: 1s all; */
}
.box:nth-child(2n) {
transform: scale(0.85);
z-index: -1;
}
.box:nth-child(2) {
left: 5%;
}
.box:nth-child(4) {
left: -5%;
}
.box:nth-child(4n + 1) {
transform: scale(0.75);
z-index: -2;
}
.box:nth-child(1) {
left: 15%;
}
.box:nth-child(5) {
left: -15%;
}
.card__text-content {
text-align: center;
width: 75%;
}
.card__title {
padding: 1rem;
}
.box--hide {
display: none;
}
.move-out-from-left {
animation: moveOutLeft 0.5s ease-in-out;
}
.move-out-from-right {
animation: moveOutRight 0.5s ease-in-out;
}
.move-to-position5-from-left {
animation: moveToP5Left 0.5s ease-in-out;
}
.move-to-position4-from-left {
animation: moveToP4Left 0.5s ease-in-out;
}
.move-to-position3-from-left {
animation: moveToP3Left 0.5s ease-in-out;
}
.move-to-position2-from-left {
animation: moveToP2Left 0.5s ease-in-out;
}
.move-to-position1-from-left{
animation: moveToP1Left 0.5s ease-in-out;
}
.move-to-position5-from-right{
animation: moveToP5Right 0.5s ease-in-out;
}
.move-to-position4-from-right{
animation: moveToP4Right 0.5s ease-in-out;
}
.move-to-position3-from-right{
animation: moveToP3Right 0.5s ease-in-out;
}
.move-to-position2-from-right{
animation: moveToP2Right 0.5s ease-in-out;
}
.move-to-position1-from-right{
animation: moveToP1Right 0.5s ease-in-out;
}
@keyframes moveOutLeft {
0% {
transform: scale(0.75) translateX(0%);
opacity: 1;
}
50% {
transform: scale(0.5) translateX(-150%);
opacity: 0.5;
}
100% {
transform: scale(0.25) translateX(0%);
opacity: 0;
}
}
@keyframes moveOutRight {
0% {
transform: scale(0.75) translateX(0%);
opacity: 1;
}
50% {
transform: scale(0.5) translateX(150%);
opacity: 0.5;
}
100% {
transform: scale(0.25) translateX(0%);
opacity: 0;
}
}
@keyframes moveToP5Left {
from {
transform: scale(0.75) translateX(100%);
}
to {
transform: scale(0.75) translateX(0);
}
}
@keyframes moveToP4Left {
from {
transform: scale(0.75) translateX(100%);
}
to {
transform: scale(0.85) translateX(0);
}
}
@keyframes moveToP3Left {
from {
transform: scale(0.85) translateX(100%);
}
to {
transform: scale(1) translateX(0);
}
}
@keyframes moveToP2Left {
from {
transform: scale(1) translateX(100%);
}
to {
transform: scale(0.85) translateX(0);
}
}
@keyframes moveToP1Left {
from {
transform: scale(0.85) translateX(100%);
}
to {
transform: scale(0.75) translateX(0);
}
}
@keyframes moveToP1Right {
from {
transform: scale(0.75) translateX(-100%);
}
to {
transform: scale(0.75) translateX(0);
}
}
@keyframes moveToP2Right {
from {
transform: scale(0.75) translateX(-100%);
}
to {
transform: scale(0.85) translateX(0);
}
}
@keyframes moveToP3Right {
from {
transform: scale(0.85) translateX(-100%);
}
to {
transform: scale(1) translateX(0);
}
}
@keyframes moveToP4Right {
from {
transform: scale(1) translateX(-100%);
}
to {
transform: scale(0.85) translateX(0);
}
}
@keyframes moveToP5Right {
from {
transform: scale(0.85) translateX(-100%);
}
to {
transform: scale(0.75) translateX(0);
}
}
<head>
<title>3d-carousal</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="button" onclick="shiftLeft()"><img src="https://image.ibb.co/mRsEb7/left_arrow.png" alt=""></div>
<div class="cards-wrapper">
<ul class="cards__container">
<li id="box1" class="box" style="background-color:red">box 1</li>
<li id="box2" class="box">box 2</li>
<li id="box3" class="box">box 3</li>
<li id="box4" class="box">box 4</li>
<li id="box5" class="box">box 5</li>
<li id="box6" class="box box--hide">box 6</li>
<li id="box7" class="box box--hide">box 7</li>
</ul>
<div id="databox1" class="card__text-content">
<h3 class="card__title">Box 1 title</h3>
<div class="card__summary">The Famous Five is a series of children's adventure novels written by English author Enid Blyton. The first book, Five on a Treasure Island, was published in 1942.</div>
</div>
<div id="databox2" class="card__text-content">
<h3 class="card__title">Box 2 title</h3>
<div class="card__summary">The Famous Five is a series of children's adventure novels written by English author Enid Blyton. The first book, Five on a Treasure Island, was published in 1942.</div>
</div>
<div id="databox3" class="card__text-content">
<h3 class="card__title">Box 3 title</h3>
<div class="card__summary">The Famous Five is a series of children's adventure novels written by English author Enid Blyton. The first book, Five on a Treasure Island, was published in 1942.</div>
</div>
<div id="databox4" class="card__text-content">
<h3 class="card__title">Box 4 title</h3>
<div class="card__summary">The Famous Five is a series of children's adventure novels written by English author Enid Blyton. The first book, Five on a Treasure Island, was published in 1942.</div>
</div>
<div id="databox5" class="card__text-content">
<h3 class="card__title">Box 5 title</h3>
<div class="card__summary">The Famous Five is a series of children's adventure novels written by English author Enid Blyton. The first book, Five on a Treasure Island, was published in 1942.</div>
</div>
<div id="databox6" class="card__text-content">
<h3 class="card__title">Box 6 title</h3>
<div class="card__summary">The Famous Five is a series of children's adventure novels written by English author Enid Blyton. The first book, Five on a Treasure Island, was published in 1942.</div>
</div>
<div id="databox7" class="card__text-content">
<h3 class="card__title">Box 7 title</h3>
<div class="card__summary">The Famous Five is a series of children's adventure novels written by English author Enid Blyton. The first book, Five on a Treasure Island, was published in 1942.</div>
</div>
</div>
<div class="button" onclick="shiftRight()"><img src="https://image.ibb.co/dfPSw7/right_arrow.png" alt=""></div>
</div>
<script src='js/index.js'></script>
</body>