Question

我正在尝试制作3D横幅。

首先，我构建了它的4个边，然后注意到我可能只需要2：

/正面可见并且上面有Banner1

/它向下旋转并使Banner2可见

/一旦完成（在转换端），它必须同时做两件事：1。在0ms内旋转回前一状态并将图像1改为2和2改为3 - >这是有效的

/到达最后一个横幅（var anzahlbanner）它应该基本上从1开始（这看起来很棘手，因为当最后一个滑入到位并向后翻转时，它需要显示最后一个（前面的6个）和banner1隐藏在一边。

但是我甚至没有达到这个目的，因为这个功能似乎发射了两次，即平滑过渡，然后是翻转过渡。

$("#eins").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

当你在javascript中激活第31行时，你会看到。

如何让我的计数器按照我需要的方式运行？

编辑：实际上，这个函数似乎没有被调用两次，而是每次转换一次：1次，2次，3次，4次，5次，6次，7次等等。

Answer 1

我认为我可以稍微简化你的javascript。

唯一的问题是我更改了div的图像，图像设置在后台。

现在，您的HTML是：

<div id="container">
    <div id="eins">
        <div></div>
    </div>
    <div id="zwei">
        <div></div>
    </div>
</div>

你的CSS是

#container {
    width: 1269px;
    height: 294px;

}

#eins, #zwei {
   position:absolute;
   top:0px;
   left:0px;
}

 #eins {
    width: 1269px;
            height:294px;
            z-index:150;
            -ms-transform-origin: 50% 50% 147px;
            -moz-transform-origin: 50% 50% 147px;
            -webkit-transform-origin: 50% 50% 147px;
  -webkit-animation: rotate 4s infinite;
  -webkit-animation-delay: -2s;
}
#zwei {
        background:red;
            width: 1269px;
            height:294px;
            z-index:70;
            -ms-transform-origin: 50% 50% 147px;
            -ms-transform: rotate3d(1, 0, 0, -90deg);
            -ms-transition: 1s;
            -ms-transition-timing-function: ease;
            -moz-transform-origin: 50% 50% 147px;
            -moz-transform: rotate3d(1, 0, 0, -90deg);
            -webkit-transform-origin: 50% 50% 147px;

            -webkit-animation: rotate 4s infinite;

}

#eins div, #zwei div {
    height:294px;

}

#eins div {
  -webkit-animation: imageseins 8s infinite;
  -webkit-animation-delay: -2s;
}
#zwei div {
  -webkit-animation: imageszwei 8s infinite;
}

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate3d(1, 0, 0, -90deg);}
   50% {-webkit-transform: rotate3d(1, 0, 0, 0deg);}
  100% {-webkit-transform: rotate3d(1, 0, 0, 90deg);}
}


@-webkit-keyframes imageseins {
    0%, 49.99% {background-image:    url("http://jenseickhoff.de/testarea/2014/img/banner1.jpg")}
    50%, 100% {background-image:    url("http://jenseickhoff.de/testarea/2014/img/banner3.jpg")}
}
@-webkit-keyframes imageszwei {
    0%, 49.99% {background-image:    url("http://jenseickhoff.de/testarea/2014/img/banner2.jpg")}
    50%, 100% {background-image:    url("http://jenseickhoff.de/testarea/2014/img/banner4.jpg")}
}

而且，正如所承诺的，你的javascript更容易（没有）

fiddle

诀窍是在图像上设置动画，即在div不可见时更改图像。

带有“on transitionend”的横幅rotate3d循环

1 个答案: