滑块不工作，控制台没有错误 - Javascript香草

Question

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

似乎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(document.getElementById('slider'))函数

的末尾添加Slide()之类的内容