javascript - slider 不工作，控制台上没有错误 - Javascript Vanilla

Question

我正在尝试使用 Javascript 创建一个 slider ，但是我似乎无法让它工作，它没有在控制台中显示任何关于为什么它似乎不起作用的错误。

CSS 中的 overflow:hidden 似乎隐藏了所有内容，而不是溢出的内容......

据我所知，它没有抓取 li 图像，尽管我不知道为什么，除非 var li 元素分配不起作用。

代码如下:

function Slide (){
	ul = document.getElementById("slide");
	liItems = ul.children;
	imageNumber = liItems.length;
	imageWidth = liItems[0].children[0].offsetwidth;
	// Set UL's Width as total width of all images in slider.
	ul.style.width = parseInt(imageWidth * imageNumber) + "px";
	// Left + Right Arrows
	leftArrow = document.getElementById("left");
	rightArrow = document.getElementById("right");

		function slider(ul){
			animate({
				delay: 17,
				duration: 4000,
				delta:function(p){
					return Math.max(0, -1 + 2 * p)},
				step:function(delta){
					ul.style.left = "-"+ parseInt(currentImage * imageWidth + delta * imageWidth) + "px";
					},
				callback:function(){
					currentImage++;
					//Keep sliding if not last image
					if (currentImage < imageNumber -1){
						slider(ul);
					}
					// Slide back to first image, if last image
					else {
						leftPosition = (imageNumber -1) * imageWidth;
						//after set seconds, call goback for first image
						setTimeout(function(){goBack(leftPosition)},3000);
						setTimeout(function(){slider(ul)},5000);
					}
				}
			});
		
			function goBack (leftPosition){
					currentImage = 0;
					id = setInterval(function(){
						if (leftPosition >= 0){
							ul.style.left = '-' + parseInt(leftPosition) + "px";
							leftPosition -= imageWidth/10;
						}else {
							clearInterval(id);
						}
					}, 17);
				}
			function animate(opts){
				start = new Date;
				id = setInterval (function(){
					timePassed = new Date - start;
					progress = timePassed / opts.duration
						if (progress > 1){
							progress = 1;
						}
					delta = opts.delta(progress);
					opts.step(delta);
						if (progress == 1){
							clearInterval(id);
							opts.callback();
						}
				}, opts.delay || 17);
			}
		}
	}
window.onload = Slide;

    #sliderwrap {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
#left {
	width: 10%;
	height: 75px;
	top: 50%;
	left: 20px;
	background-color: rgba(255,255,255,0.5);
	font-size: 4vmax;
	position: absolute;
	z-index: 1;
}
#left p, #right p {
	text-align: center;
	line-height: 75px;
	vertical-align: middle;
	color: #ff69b4;
}
#right {
	width: 10%;
	height: 75px;
	top: 50%;
	right: 20px;
	background-color: rgba(255,255,255,0.5);	
	font-size: 4vmax;
	position: absolute;
	z-index: 1;
}
#slide {
	position: absolute;
	z-index: 0;
}
#slide li {
	max-width: 100%;
	list-style-type: none;
}
#slide img {
	width: 100%;
	height: 75%;
}

<div id="sliderwrap">
		<div id="left">
			<p> < </p>
		</div>
		<ul id="slide">
			<li><img src="http://www.wallpapercase.com/wp-content/uploads/2016/05/My-Style-Photo-Wallpaper-810x506.jpg" alt="1" id="one"/></li>
			<li><img src="https://s-media-cache-ak0.pinimg.com/236x/c5/91/b2/c591b2dab7ef73898e65c4660d63696f.jpg" alt="2" id="two"/></li>
			<li><img src="https://s-media-cache-ak0.pinimg.com/236x/79/65/a2/7965a2e1141be21bdfc17d381360505a.jpg" alt="3" id="three"/></li>
			<li><img src="https://s-media-cache-ak0.pinimg.com/236x/63/01/9d/63019d238358413828cb533dc5277971.jpg" alt="4" id="four"/></li>
		</ul>
		<div id="right">
			<p> > </p>
		</div>
	</div>

Answer 1

您似乎从未调用函数 slider()，它看起来应该初始化 slider 。尝试在 Slide() 函数的末尾添加类似 slider(document.getElementById('slider')) 的内容