javascript - 如何使用 javascript/css 浏览纯 c​​ss 轮播/幻灯片？

Question

我只使用 CSS3 动画和关键帧创建了一个简单的幻灯片，我正在尝试弄清楚如何创建导航箭头，让您可以快速浏览幻灯片。

我想要一个下一个和上一个按钮/箭头，在点击时滑动到幻灯片中的每个视频。我一直在尝试用 CSS 来做，但运气不佳，我想知道是否有人有我可能忽略的解决方案。

如有任何建议，我们将不胜感激。

这是一个简单的 slider 来演示我有什么...... http://jsfiddle.net/D5Qcw/5/

HTML

<div class="wrapper">

<div class="header">
    <h1>Logo Name</h1>
    <p class="menu">Menu Button</p>
</div>

<div id="carousel">
    <ul class="video-list">
        <li>
            <div class="content-wrapper">
                <div class="progress-bar"></div>

                <h2>Content box</h2>
                <div class="crossRotate">open button</div>

                <p>Content box paragraph text <br/><br/>Play button
                </p>
            </div>

            <div class="video-wrapper">
                <iframe width="25%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe>  
            </div>    
        </li>
        <li>
            <div class="content-wrapper">
                 <div class="progress-bar"></div>

                <h2>Content box 2</h2>
                <div class="crossRotate">open button</div>

                <p>Content box paragraph text <br/><br/>Play button
                </p>
            </div>
            <div class="video-wrapper">
                <iframe width="25%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe>
            </div>   
        </li>
        <li>
            <div class="content-wrapper">
                 <div class="progress-bar"></div>

                 <h2>Content box 3</h2>
                <div class="crossRotate">open button</div>

                <p>Content box paragraph text <br/><br/>Play button
                </p>
            </div>
            <div class="video-wrapper">
                <iframe width="25%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe>
            </div>   
        </li>
        <li>
            <div class="content-wrapper">
                 <div class="progress-bar"></div>

                 <h2>Content box 4</h2>
                <div class="crossRotate">open button</div>

                <p>Content box paragraph text <br/><br/>Play button
                </p>
            </div>
            <div class="video-wrapper">
                <iframe width="100%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe>
            </div>   
        </li>
    </ul>    
</div> <!-- /carousel -->

</div>    

CSS

.wrapper {
    position: absolute;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin: 0;
    padding:0;
    z-index: 1;
}

.header {
    position: absolute;
    height: 20em;
    z-index: 2;
    width: 100%;
    display: block;
    padding-top: 2em;
}

h1 {
    font-size: 20px;
    color: blue;
    z-index: 999;
    float: left;
}

h2 {
    position: absolute;
    float: left;
}

p.menu {
    position: absolute;
    color: blue;
    z-index: 999;
    float: left;
    right: 20px;
}

p {
    position: absolute;
    padding-top: 3em;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
   list-style: none; 
}

#carousel {
    width: 100%;
}

#carousel .video-list {
    position: relative;
    width: 400%;
    height: 100%;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    animation: slider 40s ease-in-out infinite;
    -webkit-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite;
    -moz-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite;
    -o-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite;
    -ms-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite;
}

@keyframes slider {
    0% { transform: translateX(0%); }
    23% { transform: translateX(0%); }
    26% { transform: translateX(-25%); }
    51% { transform: translateX(-25%); }
    54% { transform: translateX(-50%); }
    79% { transform: translateX(-50%); }
    82% { transform: translateX(-75%); }
    97% { transform: translateX(-75%); }
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slider {
    0% { -webkit-transform: translateX(0%); }
    23% { -webkit-transform: translateX(0%); }
    26% { -webkit-transform: translateX(-25%); }
    51% { -webkit-transform: translateX(-25%); }
    54% { -webkit-transform: translateX(-50%); }
    79% { -webkit-transform: translateX(-50%); }
    82% { -webkit-transform: translateX(-75%); }
    97% { -webkit-transform: translateX(-75%); }
    100% { -webkit-transform: translateX(0%); }
 }

 @-moz-keyframes slider {
    0% { -moz-transform: translateX(0%); }
    23% { -moz-transform: translateX(0%); }
    26% { -moz-transform: translateX(-25%); }
    51% { -moz-transform: translateX(-25%); }
    54% { -moz-transform: translateX(-50%); }
    79% { -moz-transform: translateX(-50%); }
    82% { -moz-transform: translateX(-75%); }
    97% { -moz-transform: translateX(-75%); }
    100% { -moz-transform: translateX(0%); }
}

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

#carousel .video-list .content-wrapper {
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: -130px;
    z-index: 999;
    background: rgba(255, 255, 255, 0.9);
    -webkit-transition: bottom 1s;
    -moz-transition: bottom 1s;
    -o-transition: bottom 1s;
    -ms-transition: bottom 1s;
    transition: bottom 1s;
}

.progress-bar {
    background: #000; 
    height: 5px; 
    width: 40px;
    position: relative; 
    animation: mymove 10s infinite;
    -webkit-animation: mymove 10s infinite; 
    -moz-animation: mymove 10s infinite; 
    -o-animation: mymove 10s infinite; 
    -ms-animation: mymove 10s infinite; 
    animation-timing-function: linear; 
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
}

@keyframes mymove {
    from {left:0;}
    to {right:-97%;}
}

@-webkit-keyframes mymove {
    from {left:0;}
    to {right:-97%;}
}

#carousel .video-wrapper {
    position: relative;
    top: 0%;
    left: 0%;
    width: 200%;
    height: 200%;
    z-index: 2;
}

#carousel .video-wrapper iframe {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: 50%;
    min-height: 50%;
    margin: auto;
    z-index: 2;
}

.crossRotate {
    position: absolute;
    font-size: 20px;
    right: 0;
    -webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -o-transform;
    transition-property: transform;
    z-index: 999;
 }

.crossRotate:hover {
    cursor: pointer;
 }

Answer 1

我会使用 Javascript 进行用户交互

here是一个简单的教程。

希望对你有帮助

这是一个 JSFiddle，它应该能给你这个想法 :)

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

        position = (position + 25) % 100;

        $('#carousel .video-list').css('-webkit-transform', 'translateX(-' + position + '%)');
    });
});

http://jsfiddle.net/D5Qcw/6/