Suwak JavaScript nie działa poprawnie z końcem przejścia

Question

Nie wiem, dlaczego ludzie nie odpowiadają na to pytanie. Robię poziomy nieskończony suwak pętli. Używam kontenera, który ma 3 obrazy, na przykład jeśli są 3 obrazy, to sklonuj pierwszy obraz i umieść go na końcu suwaka, tak samo jak w przypadku ostatniego obrazu sklonuj i umieść go przed pierwszym obrazem. obraz. Teraz całkowita liczba zdjęć wynosi 5. Domyślne tłumaczenie suwaków zawsze rozpoczyna się od pierwszego obrazu, a nie od klonu pierwszego. Oto example. Zmierzam do tego, że chcę zresetować suwak po tym, jak suwak dojdzie do ostatniego obrazu klona z tą samą ciągłą pętlą jak suwak karuzeli. Próbuję użyć addEventListener z nazwą przejścia zdarzenia, ale to zdarzenie nie działa poprawnie i wykazuje niezadowalające zachowanie. Czy istnieje sposób, aby to naprawić?

(function() { 
 
    var resetTranslation = "translate3d(-300px,0px,0px)"; 
 
    var elm = document.querySelector('.Working'); 
 
    elm.style.transform = resetTranslation; 
 
    var arr = document.querySelectorAll('.Working li'); 
 
    var clonefirst, 
 
     clonelast, 
 
     width = 300; 
 
    index = 2; 
 
    clonefirst = arr[0].cloneNode(true); 
 
    clonelast = arr[arr.length - 1].cloneNode(true); 
 

 
    elm.insertBefore(clonelast, arr[0]); 
 
    arr[arr.length - 1].parentNode.insertBefore(clonefirst, arr[arr.length - 1].nextSibling); 
 
    //Update 
 
    arr = document.querySelectorAll('.Working li'); 
 
    elm.style.transition = 'transform 1.5s ease'; 
 

 
    setInterval(function() { 
 

 
     elm.style.transform = 'translate3d(-' + index * width + 'px,0px,0px)'; 
 
     if (index == arr.length - 1) { 
 
      elm.addEventListener('transitionend', function() { 
 
       elm.style.transform = resetTranslation; 
 
      }); 
 
      index = 1; 
 
     } 
 
     index++; 
 

 
    }, 4000) 
 

 
})();

*{ 
 
    box-sizing: border-box; 
 
} 
 
.wrapper{ 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 320px; 
 
    width: 300px; 
 

 

 
} 
 

 
.Working{ 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    width: 3125%; 
 

 

 
} 
 
.Working li{ 
 
    position: relative; 
 
    float: left; 
 
} 
 

 

 
img{ 
 
    max-width: 100%; 
 
    display: block; 
 
} 
 

 
.SubContainer:after{ 
 
    display: table; 
 
    clear: both; 
 
    content: ""; 
 
}

<div class="wrapper"> 
 
    <ul class="SubContainer Working"> 
 
     <li> <img class="" src="http://i.imgur.com/HqQb9V9.jpg" /></li> 
 
     <li><img class="" src="http://i.imgur.com/PMBBc07.jpg" /></li> 
 
     <li><img class="" src="http://i.imgur.com/GRrGSxe.jpg" /></li> 
 
    </ul> 
 
</div>

Answer 1

to wydarzenie transition end nie jest natychmiast zwolnić, ponieważ ostatnia przemiana nie obliczane kiedy pojawiają się ostatni klon obrazu. Możesz to łatwo osiągnąć za pomocą funkcji setTimeout i przekazać liczbę milisekund do oczekiwania, po czym zresetować tłumaczenie. Nie wiem, czy to wydajne rozwiązanie, ale myślę, że można to łatwo zrobić za pomocą tej funkcji. Teraz naprawiam twój kod za pomocą tego.

(function() { 
 
    var elm = document.querySelector('.Working'); 
 
    var arr = document.querySelectorAll('.Working li'); 
 
    var clonefirst, 
 
     clonelast, 
 
     width = 300; 
 
    index = 2; 
 
    clonefirst = arr[0].cloneNode(true); 
 
    clonelast = arr[arr.length - 1].cloneNode(true); 
 

 
    elm.insertBefore(clonelast, arr[0]); 
 
    arr[arr.length - 1].parentNode.insertBefore(clonefirst, arr[arr.length - 1].nextSibling); 
 
    //Update 
 
    arr = document.querySelectorAll('.Working li'); 
 

 
    setInterval(function() { 
 
     $(elm).css({ 
 
      'transform': 'translate3d(-' + (index * width) + 'px,0px,0px)', 
 
      'transition': 'transform 1.5s ease' 
 
     }); 
 
     if (index == arr.length - 1) { 
 
      setTimeout(function() { 
 
       $(elm).css({'transform': 'translate3d(-300px,0px,0px)', 'transition': 'none'}); 
 
       index = 1; 
 
      }, 1400); 
 

 
     } 
 
     index++; 
 

 
    }, 2000) 
 

 
})();

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.wrapper { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 320px; 
 
    width: 300px; 
 
    margin-top: 8px; 
 

 
} 
 

 
.Working { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    transform: translateX(-300px); 
 
    width: 3125%; 
 

 
} 
 

 
.Working li { 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    display: block; 
 
} 
 

 
.SubContainer:after { 
 
    display: table; 
 
    clear: both; 
 
    content: ""; 
 
} 
 

 
#checkboxer:checked + .wrapper { 
 
    overflow: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="checkboxer">Remove Overflow Hidden</label> 
 
<input type="checkbox" id="checkboxer" name="checkboxer"/> 
 

 
<div class="wrapper"> 
 
    <ul class="SubContainer Working"> 
 
     <li> <img class="" src="http://i.imgur.com/HqQb9V9.jpg" /></li> 
 
     <li><img class="" src="http://i.imgur.com/PMBBc07.jpg" /></li> 
 
     <li><img class="" src="http://i.imgur.com/GRrGSxe.jpg" /></li> 
 
    </ul> 
 
</div>

Answer 2

mam pomieszane dookoła z kodem do włamywania w kropce: https://jsfiddle.net/rap8o3q0/

Zmieniona część:

var currentItem = 1; 

setInterval(function() { 
    var getWidth = window.innerWidth; 

    if(len === currentItem){ 
     i = 1; 
     currentItem = 1; 
    } else { 
     currentItem++; 
     i++; 
    } 

    var val = 'translate3d(-' + (i-1) * getWidth + 'px,0px,0px)'; 
    UnorderedListElement.style.transform = val; 

}, 3000); 

Answer 3

Aby wrócić swój suwak w jego pierwsza pozycja, musisz wywołać zdarzenie transition end po ostatnim (3) tłumaczeniu, które działa tylko jeden raz.

$(UnorderedListElement).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() 
    { 
     { 
      $(UnorderedListElement).css('transform', 'translate3d(0, 0, 0)'); 

     } 
    }); 

Ale trzeba go natychmiast przetłumaczyć. W linku poniżej możesz zobaczyć mój suwak, który jest bardzo podobny do twojego, ale działa poprzez pozycjonowanie absolutne i zmienić właściwość left zamiast przekształcania.

Slider

Ostatnią rzeczą: To nie jest dobry pomysł, aby przesunąć otwór pojemnika obrazu. Musisz przesuwać swoje obrazy osobno. Na swój sposób pojawia się oczywisty problem: gdy strona przesuwa się po ostatnim obrazie, nie ma następnego zdjęcia, aby ją wypchnąć!

Answer 4

można zaktualizować setInterval jako

setInterval(function() { 
    var getWidth = window.innerWidth; 
    var val = 'translate3d(-' + i * getWidth + 'px,0px,0px)'; 
    UnorderedListElement.style.transform = val; 

    i++; 
    if (i == 3) { //assuming three images here 
     i = 0 
    } 


    }, 3000) 

var DomChanger; 
 

 
(function() { 
 

 

 
    var listItem = document.querySelectorAll('.ah-slider li'); 
 
    var len = listItem.length; 
 

 

 
    var getImage = document.querySelector('.ah-slider li img'); 
 
    var UnorderedListElement = document.querySelector('.ah-slider'); 
 

 

 
    var outerDiv = document.querySelector('.Slider'); 
 

 
    UnorderedListElement.setAttribute('style', 'width:' + (len * 1000 + 215) + '%'); 
 

 

 
    var i = 1; 
 

 
    DomChanger = function() { 
 

 
    for (var i = 0; i < len; ++i) { 
 
     listItem[i].setAttribute('style', 'width:' + window.innerWidth + 'px'); 
 
    } 
 
    outerDiv.setAttribute('style', 'height:' + getImage.clientHeight + 'px'); 
 

 
    }; 
 

 

 
    setInterval(function() { 
 
    var getWidth = window.innerWidth; 
 
    var val = 'translate3d(-' + i * getWidth + 'px,0px,0px)'; 
 
    UnorderedListElement.style.transform = val; 
 

 
    i++; 
 
    if (i == 3) { 
 
     i = 0 
 
    } 
 

 

 
    }, 3000) 
 

 

 
})(); 
 

 

 

 

 

 
window.onload = function() { 
 
    DomChanger(); 
 

 
}; 
 
window.onresize = function() { 
 

 
    DomChanger(); 
 
};

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #fff; 
 
} 
 

 
.Slider { 
 
    width: 100%; 
 
    margin: 50px 0 0; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.ah-slider { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    position: relative; 
 
    transition: transform .5s ease; 
 
} 
 

 
.ah-slider li { 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
.ah-slider li img { 
 
    max-width: 100%; 
 
    display: block; 
 
} 
 

 
.clearFix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="Slider"> 
 
    <ul class="ah-slider clearFix"> 
 
    <li> 
 
     <a href=""><img class="" src="http://i.imgur.com/L9Zi1UR.jpg" title="" /></a> 
 
    </li> 
 
    <li> 
 
     <a href=""><img class="" src="http://i.imgur.com/FEcEwFs.jpg" title="" /></a> 
 
    </li> 
 
    <li><a href=""><img class="" src=http://i.imgur.com/hURSKNa.jpg" title="" /></a></li> 
 

 

 
    </ul> 
 
</div>