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; 
}

none 有效，这是我的脚本的一部分：

 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)';
 });

Internet Explorer 没有执行我的脚本

Internet Explorer is not executing my script

html

javascript

cross-browser