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

Internet Explorer没有执行我的脚本

1 个答案: