如何使用純JavaScript和CSS創建垂直輪播

Question

我正在嘗試使用vanilla JavaScript和CSS創建一個垂直輪播。 我知道jQuery有一個輪播庫但是我想要從頭開始構建這個沒有外部庫的東西。 我開始嘗試移動頂部圖像，然后我計划繼續進行下一個圖像移動。 我卡在第一張圖片上。 這是我需要你幫助的地方，StackOverflowers。

我的HTML：

<div class="slider vertical" >
    <img class="first opened" src="http://malsup.github.io/images/beach1.jpg">
    <img class="opened" src="http://malsup.github.io/images/beach2.jpg">
    <img src="http://malsup.github.io/images/beach3.jpg">
    <img src="http://malsup.github.io/images/beach4.jpg">
    <img src="http://malsup.github.io/images/beach5.jpg">
    <img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class="center">
    <button id="prev">∧ Prev</button>
    <button id="next">∨ Next</button>
</div>

JavaScript的：

var next = document.getElementById('next');
var target = document.querySelector('.first');

next.addEventListener('click', nextImg, false);

function nextImg(){
     if (target.classList.contains('opened')) {
        target.classList.remove('opened');
        target.classList.add('closed');
    } else {
        target.classList.remove('closed');
        target.classList.add('opened');
    }
}

CSS：

div.vertical {
    width: 100px;
}

.slider {
    position: relative;
    overflow: hidden;
    height: 250px;

        -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
            box-sizing:border-box;

    -webkit-transition:-webkit-transform 1.3s ease;
       -moz-transition:   -moz-transform 1.3s ease;
        -ms-transition:    -ms-transform 1.3s ease;
            transition:        transform 1.3s ease;
}

.slider img {
    width: 100px;
    height: auto;
    padding: 2px;
}

.first.closed{
    /* partially offscreen */
    -webkit-transform: translate(0, -80%);
       -moz-transform: translate(0, -80%);
        -ms-transform: translate(0, -80%);
            transform: translate(0, -80%);
}

.first.opened{
    /* visible */
    -webkit-transform: translate(0, 0%);
       -moz-transform: translate(0, 0%);
        -ms-transform: translate(0, 0%);
            transform: translate(0, 0%);
}

我的思維方式是：

1. 使用類來移動和顯示內容
2. 使用JavaScript添加和刪除類

我想我可能沒有正確地解決問題。

這就是我希望它的樣子： http ： //jsfiddle.net/natnaydenova/7uXPx/

這是我的糟糕嘗試： http ： //jsfiddle.net/6cb58pkr/

Answer 1

使用CSS transform屬性的另一種方法是將轉盤絕對定位在包裝器div並操縱轉盤的top屬性。 然后，您可以使用任何您喜歡的緩動功能來設置滑動動畫。 在下面的代碼段中，我使用立方緩和輸入/輸出 。

需要注意的一個棘手的事情是旋轉圖像和執行滑動動畫的順序。 當您想要顯示下面的下一張圖片時，您必須：

• 將旋轉木馬滑動到一個相框的​​高度
• 將第一張圖像旋轉到最后
• 將輪播的垂直偏移重置為零

要顯示上面的下一張圖片：

• 將最后一張圖像旋轉到開頭
• 立即將旋轉木馬移動到一個相框的​​高度
• 向下滑動轉盤，直到其垂直偏移達到零

在下面的代碼片段中，您可以通過調整腳本頂部的Carousel.width來設置輪播的寬度。 （雖然圖像高度不必與圖像寬度相同，但我確實假設所有圖像具有相同的尺寸。）您還可以使用Carousel.numVisible和Carousel.duration參數。

 var Carousel = { width: 100, // Images are forced into a width of this many pixels. numVisible: 2, // The number of images visible at once. duration: 600, // Animation duration in milliseconds. padding: 2 // Vertical padding around each image, in pixels. }; function rotateForward() { var carousel = Carousel.carousel, children = carousel.children, firstChild = children[0], lastChild = children[children.length - 1]; carousel.insertBefore(lastChild, firstChild); } function rotateBackward() { var carousel = Carousel.carousel, children = carousel.children, firstChild = children[0], lastChild = children[children.length - 1]; carousel.insertBefore(firstChild, lastChild.nextSibling); } function animate(begin, end, finalTask) { var wrapper = Carousel.wrapper, carousel = Carousel.carousel, change = end - begin, duration = Carousel.duration, startTime = Date.now(); carousel.style.top = begin + 'px'; var animateInterval = window.setInterval(function () { var t = Date.now() - startTime; if (t >= duration) { window.clearInterval(animateInterval); finalTask(); return; } t /= (duration / 2); var top = begin + (t < 1 ? change / 2 * Math.pow(t, 3) : change / 2 * (Math.pow(t - 2, 3) + 2)); carousel.style.top = top + 'px'; }, 1000 / 60); } window.onload = function () { document.getElementById('spinner').style.display = 'none'; var carousel = Carousel.carousel = document.getElementById('carousel'), images = carousel.getElementsByTagName('img'), numImages = images.length, imageWidth = Carousel.width, aspectRatio = images[0].width / images[0].height, imageHeight = imageWidth / aspectRatio, padding = Carousel.padding, rowHeight = Carousel.rowHeight = imageHeight + 2 * padding; carousel.style.width = imageWidth + 'px'; for (var i = 0; i < numImages; ++i) { var image = images[i], frame = document.createElement('div'); frame.className = 'pictureFrame'; var aspectRatio = image.offsetWidth / image.offsetHeight; image.style.width = frame.style.width = imageWidth + 'px'; image.style.height = imageHeight + 'px'; image.style.paddingTop = padding + 'px'; image.style.paddingBottom = padding + 'px'; frame.style.height = rowHeight + 'px'; carousel.insertBefore(frame, image); frame.appendChild(image); } Carousel.rowHeight = carousel.getElementsByTagName('div')[0].offsetHeight; carousel.style.height = Carousel.numVisible * Carousel.rowHeight + 'px'; carousel.style.visibility = 'visible'; var wrapper = Carousel.wrapper = document.createElement('div'); wrapper.id = 'carouselWrapper'; wrapper.style.width = carousel.offsetWidth + 'px'; wrapper.style.height = carousel.offsetHeight + 'px'; carousel.parentNode.insertBefore(wrapper, carousel); wrapper.appendChild(carousel); var prevButton = document.getElementById('prev'), nextButton = document.getElementById('next'); prevButton.onclick = function () { prevButton.disabled = nextButton.disabled = true; rotateForward(); animate(-Carousel.rowHeight, 0, function () { carousel.style.top = '0'; prevButton.disabled = nextButton.disabled = false; }); }; nextButton.onclick = function () { prevButton.disabled = nextButton.disabled = true; animate(0, -Carousel.rowHeight, function () { rotateBackward(); carousel.style.top = '0'; prevButton.disabled = nextButton.disabled = false; }); }; }; 

 body { font-family: sans-serif; } .buttons { margin: 5px 0; } button { font-size: 14px; display: inline; padding: 3px 6px; border: 2px solid #ccc; background: #fff; border-radius: 5px; outline: none; } button:hover { border: 2px solid #888; background: #ffe; cursor: pointer; } #carouselWrapper { position: relative; overflow: hidden; } #carousel { position: absolute; visibility: hidden; } 

 <div id="spinner"> Loading... </div> <div id="carousel"> <img src="http://malsup.github.io/images/beach1.jpg"> <img src="http://malsup.github.io/images/beach2.jpg"> <img src="http://malsup.github.io/images/beach3.jpg"> <img src="http://malsup.github.io/images/beach4.jpg"> <img src="http://malsup.github.io/images/beach5.jpg"> <img src="http://malsup.github.io/images/beach9.jpg"> </div> <div class="buttons"> <button id="prev">&uarr; Prev</button> <button id="next">&darr; Next</button> </div>