Internet Explorer沒有執行我的腳本

Question

我制作了一個腳本，可以在您移動圖像的同時，單擊我網站上的“下一步”和“后退”按鈕，它在Chrome，Firefox，Edge，Opera和Safari中可以正常工作，但在IE11中不起作用。

我已經嘗試過

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

在關閉之前，還顯示了該腳本的開頭：

if (typeof(UserAgentInfo) != 'undefined' && !window.addEventListener) 
{ 
    UserAgentInfo.strBrowser=1; 
} 

它們都不起作用，這是我腳本的一部分：

  var slideS = document.querySelector('.slide'); var slideImg = document.querySelectorAll('.slide img'); var slideC = document.querySelector('.slideC'); //buttons var prevBtn = document.querySelector('#prevBtn'); var nextBtn = document.querySelector('#nextBtn'); var counter = 1; var size = slideC.offsetWidth; slideS.style.transform = 'translateX(' + (-size * counter) + 'px)'; var counter = 1; var size = slideC.offsetWidth; slideS.style.transform = 'translateX(' + (-size * counter) + 'px)'; nextBtn.addEventListener('click', ()=>{ if (counter >= slideImg.length - 1) return; slideS.style.transition = "transform 0.4s ease-in-out"; counter = counter + 1; slideS.style.transform = 'translateX(' + (-size * counter) + 'px)'; }); prevBtn.addEventListener('click', ()=>{ if (counter <= 0) return; slideS.style.transition = "transform 0.4s ease-in-out"; counter = counter - 1; slideS.style.transform = 'translateX(' + (-size * counter) + 'px)'; }); slideS.addEventListener('transitionend', ()=>{ if(slideImg[counter].id === 'uClone'){ slideS.style.transition = "none"; counter = slideImg.length - 2; slideS.style.transform = 'translateX(' + (-size * counter) + 'px)'; } if(slideImg[counter].id === 'pClone'){ slideS.style.transition = "none"; counter = slideImg.length - counter; slideS.style.transform = 'translateX(' + (-size * counter) + 'px)'; } }); 

  .slide { display: flex; width: 100%; } .slideC { width: 768px; height: 432px; margin: 30px auto 0 auto; overflow: hidden; position: relative; } .menuBtn:hover{ color: #6936a3; } #prevBtn{ position: absolute; background: #bbbbbb; height: 432px; left: 0%; width: 200px; z-index: 10; font-size: 40px; color: #fff; opacity: 0; cursor: pointer; text-align: center; } #prevBtn:hover{ opacity: 0.2; } #nextBtn{ position: absolute; background: #bbbbbb; height: 432px; right: 0%; width: 200px; z-index: 10; font-size: 40px; color: #fff; opacity: 0; cursor: pointer; text-align: center; } #nextBtn:hover{ opacity: 0.2; } #lupa{ height: 432px; width: 368px; background: #bbbbbb; position: absolute; z-index: 10; right: 200px; font-size: 40px; color: white; opacity: 0; cursor: pointer; } #lupa:hover{ opacity: 0.2; } #main{ width: 100%; height: 100%; position: absolute; } #appear_image_div{ width: 100%; height: 183%; position: abosolute; z-index: 15; opacity:0.9; background: black; } #appear_image{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 16; border-radius: 18px; } #close{ position: fixed; bottom: 92%; left: 95%; z-index: 16; border-radius: 18px; font-size: 40px; color: #dedede; opacity: 1; cursor: pointer; } 

  <div id="titulointro" style="display: block; margin: 0; padding: 0;"> <h3 style="margin-top: 70px; margin-bottom: 0px; color: white; text-transform: uppercase; font-weight: 400; font-size: 30px; font-family: FuturaMediumBT; Arial; Helvetica; sans-serif;"> Projetos de marketing</h3> <span style="display: inline-block; margin-top: 30px; width: 30px; border-bottom: 1px solid #bbb5b5; background: #fff;"></span> </div> <div class="slideC" style="box-shadow: 0px 6px #48337a;border-radius: 15px;"> <div id="prevBtn"> <i class="fas fa-arrow-left" style="margin-top: 197px;"></i> </div> <div id="nextBtn"> <i class="fas fa-arrow-right" style="margin-top: 197px;"></i> </div> <div id="lupa"> <i class="fas fa-search-plus" style="margin-top: 197px;"></i> </div> <div id="fotos" class="slide"> <img src="4.jpg" id="uClone" width="768" height="432" style="min-width: 768"></img> <img src="1.jpg" id="img1" width="768" height="432" style="min-width: 768"></img> <img src="2.jpg" id="img2" width="768" height="432" style="min-width: 768"></img> <img src="3.jpg" id="img3" width="768" height="432" style="min-width: 768"></img> <img src="4.jpg" id="img4" width="768" height="432" style="min-width: 768"></img> <img src="1.jpg" id="pClone" width="768" height="432" style="min-width: 768"></img> </div> </div> 

Answer 1

ES6語法（let，const，箭頭函數等）在IE中不起作用。 嘗試改變

 let counter = 1; const size = slideC.offsetWidth; 

至：

 var counter = 1; var size = slideC.offsetWidth; 

另外，在addEventListener您使用的是箭頭功能。 這些也是來自ES6，因此例如

 nextBtn.addEventListener('click', ()=>{ if (counter >= slideImg.length - 1) return; slideS.style.transition = "transform 0.4s ease-in-out"; counter = counter + 1; slideS.style.transform = 'translateX(' + (-size * counter) + 'px)'; }); 

采用

 nextBtn.addEventListener('click', function() { if (counter >= slideImg.length - 1) return; slideS.style.transition = "transform 0.4s ease-in-out"; counter = counter + 1; slideS.style.transform = 'translateX(' + (-size * counter) + 'px)'; });