圖像旋轉木馬不會無限循環倒退

我正在創建一個帶有三個圖像的HTML5圖像旋轉木馬。轉換使用TweenMax和TimeLine完成。我有兩個點擊事件，一個用於下一個圖像，另一個用於上一個圖像，下一個圖像函數正常運行，並且是無限循環，但是前一個函數在經過一次圖像後停止。這裏是代碼。圖像旋轉木馬不會無限循環倒退

HTML：

<div id="expanded-state"> 
    <div id="expanded-exit"></div> 
    <div id="close-btn"></div> 
    <button id="arrow-prev"></button> 
    <button id="arrow-next"></button> 
    <div id="theater"> 
     <div class="theater"></div> 
     <div class="theater"></div> 
     <div class="theater"></div> 
    </div> 
    <div id="cta"></div> 
    <div id="footer"></div> 
    </div> 
</div>

CSS：

.theater { 
    width: 970px; 
    height: 345px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
} 

.theater:nth-child(1){ 
    background: url(theater-01.jpg); 
} 

.theater:nth-child(2){ 
    background: url(theater-02.jpg); 
} 

.theater:nth-child(3){ 
    background: url(theater-03.jpg); 
}

JS：

var $slides = $(".theater"); 
var currentSlide = 0; 

function addListeners() { 
    arrowPrev.addEventListener('click', theaterScrollPrev); 
    arrowNext.addEventListener('click', theaterScrollNext); 
} 

function theaterScrollNext() { 

    tm.to($slides.eq(currentSlide), 0.5, {left:"-970px"});   

    if (currentSlide < $slides.length - 1) { 
     currentSlide++; 
    } 
    else { 
     currentSlide = 0; 
    } 

    tm.fromTo($slides.eq(currentSlide), 0.5, {left: "970px"}, {left:"0px"}); 
} 

function theaterScrollPrev() { 

    tm.to($slides.eq(currentSlide), 0.5, {left:"970px"});  

    if (currentSlide < $slides.length - 1) { 
     currentSlide--; 
    } 
    else { 
     currentSlide = 0; 
    } 

    tm.fromTo($slides.eq(currentSlide), 0.5, {left: "-970px"}, {left:"0px"}); 
}

來源

2016-05-24 Ryan Copeland

延長我的問題有點。 jQuery是如此龐大，所以我想知道是否有香草js方式來做這個相同的功能。我的js排骨還不是很棒。謝謝。 –

你應該動畫'x'屬性而不是'left'屬性，這樣你就可以在子像素級別上進行動畫處理。 CSS位置偏移像'left'只在像素級別上有動畫效果。動畫'x'和'y'將利用硬件加速。動畫CSS位置偏移像「left」會觸發佈局，而不會給你柔滑平滑的動畫。 http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ –

我相信，如果它不

function theaterScrollPrev() { 
    console.log('previous clicked') 
    tm.to($slides.eq(currentSlide), 0.5, {left:"970px"});  

    if (currentSlide <= 0) { 
     currentSlide = $slides.length -1; 
    } else { 
    currentSlide--; 
    } 

     tm.fromTo($slides.eq(currentSlide), 0.5, {left: "-970px"}, {left:"0px"}); 
}

這應該修復它，但告訴我

Codepen Fixed

來源

2016-05-24 14:34:53 Riddell

謝謝@Riddell，但那並沒有解決它。第一張幻燈片會在頁面加載時顯示，但是當您單擊上一張幻燈片時，它將轉到空白幀。 –

你能不能讓一個jsFiddle，所以我可以嘗試自己請瑞安？這將有助於理解這個問題。 – Riddell

我使用codepen。 http://codepen.io/RECopeland/pen/grVyRY –

圖像旋轉木馬不會無限循環倒退

回答

相關問題