Question

我有4个视频的纯CSS3幻灯片，效果很好。我使用以下代码浏览幻灯片，但是因为我告诉它在幻灯片放映动画恢复时向左或向右移动25％，认为有些幻灯片需要根据您点击下一次＆＃39;。

的次数

例如，如果我点击了下一张2张幻灯片，那么只要幻灯片重新开始播放，而不是返回第一张幻灯片，就会显示2张空白幻灯片。

我很难找到连接两者的解决方案，以便您可以浏览幻灯片，同时也知道关键帧中的当前位置。

如果有人能指出我正确的方向，我会非常感激。

CSS

#carousel {
   width: 100%;
   overflow: hidden;
}

@-webkit-keyframes slider {
0%, 20%, 100%{ left: 0 }
25%, 45%{ left: -100% }
50%, 70%{ left: -200% }
75%, 95%{ left: -300% }
}

@-moz-keyframes slider {
0%, 20%, 100%{ left: 0 }
25%, 45%{ left: -100% }
50%, 70%{ left: -200% }
75%, 95%{ left: -300% }
}

@keyframes slider {
0%, 20%, 100%{ left: 0 }
25%, 45%{ left: -100% } 
50%, 70%{ left: -200% }
75%, 95%{ left: -300% }
}

#carousel .video-list, #descriptionCarousel .description-list {
    position: relative;
    width: 400%;
    height: 100%;
    left: 0; 
    top: 0;
    bottom: 0;
    animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
    -webkit-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
    -moz-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
    -o-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
    -ms-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite; 
    animation-delay: 4.6s;
    -webkit-animation-delay: 4.6s;
    -moz-animation-delay: 4.6s;
    -ms-animation-delay: 4.6s;
    -webkit-transition: -webkit-transform 1s cubic-bezier(.93,.11,.32,.94);
    transition: -transform 1s cubic-bezier(.93,.11,.32,.94);
}

#carousel .video-list li, #descriptionCarousel .description-list li  {
    position: relative;
    width: 25%;
    height: 100%;
    overflow: hidden;
    display: inline-block;
    float: left;
}

JS

$(function () {
var position = 0;
$('#next').on('click', function (e) {
e.preventDefault();

position = (position - 25) % 100;

$('#carousel .video-list').css('-webkit-transform', 'translateX(' + position + '%)');
$(".video-list, #timeline, .description-list").css({"animation-play-state": "paused", 
"-webkit-animation-play-state": "paused"});

});

$('#previous').on('click', function (e) {
e.preventDefault();

position = (position + 25) % 100;
position = (position > 0) ? -75 : position;

$('#carousel .video-list, #descriptionCarousel .description-list').css('-webkit-
transform', 'translateX(' + position + '%)');
$(".video-list, #timeline, .description-list").css({"animation-play-state": "paused", 
"-webkit-animation-play-state": "paused"});
});

});

使用关键帧动画css幻灯片和javascript导航？

0 个答案: