滑块不工作,没有错误在控制台- Javascript香草
Slider not working, No errors on Console - Javascript Vanilla
我试图用Javascript创建一个滑块,但是我似乎不能让它工作,它没有显示控制台的任何错误,为什么它似乎不工作。
似乎overflow:hidden
在css中,似乎隐藏了一切,而不是什么溢出…
从我所看到的,是它不是抓取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>
您似乎从未调用函数slider()
,它看起来应该初始化滑块。尝试在Slide()
函数的末尾添加slider(document.getElementById('slider'))
相关文章:
- 为什么我能够从javascript控制台发送跨域ajax请求
- 将数组的拼接分配给自身时,Javascript控制台打印不起作用
- 如何使Visual Studio自动清除Javascript控制台
- 只有当Javascript控制台在chrome上打开时,Javascript才能工作
- 打印javascript控制台的堆栈跟踪
- 如何在调试模式停止后查看Visual Studio 2015 Javascript控制台
- 如何:编写漂亮的HTML代码和Javascript控制台
- 我有可能防止黑客使用网络控制台用JavaScript重复调用upvote(AJAX)函数吗
- 执行JavaScript代码,使用selenium webdriver或WatiN从控制台获取日志
- 调用Javascript时出现控制台错误
- system.err风格的控制台以javascript打印
- 在类似chrome的浏览器中停止控制台javascript命令
- 为什么没有任何内容记录到控制台?{JavaScript}.
- 如何在页面加载时执行控制台 Javascript
- 所有错误都显示在 Chrome 控制台 JavaScript 错误中
- 如何将 neo4j 查询打印到控制台?(Javascript)
- 慢下来,控制台.(javascript/jquery)
- 控制台JavaScript的浏览器兼容性
- 滑块不工作,没有错误在控制台- Javascript香草
- 如何将消息记录到web开发人员控制台-JavaScript