我已经制作了一个脚本,可以在您移动图像的同时单击网站上的“下一步”和“后退”按钮,它在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>

最佳答案

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

关于javascript - Internet Explorer没有执行我的脚本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55307681/

10-11 23:30
查看更多