Javascript图像滑块无法正常工作

我正尝试使用控件“Next”和“Previous”创建图像滑块。接下来，应该使用负余量属性向左滑动图像以显示第二个图像。所有保存单独图像的列表元素都设置为display: inline-block，因此每个列表元素可以彼此相邻，而不是堆叠。Javascript图像滑块无法正常工作

但是，我发现，当第一张图片向左滑动时，它仍然显示出一点点，同时显示第二张图片，一次又一次地像这样，所有东西都会滑动但不会完全。它们滑动的距离等于图像的宽度。

此外，当我到达最后一张图片并点击下一张图片时，应该返回到第一张图片，问题是它会沿着第一张图片的方式显示每张图片。

window.onload = function() { 
 
    var nextBtn = document.getElementsByClassName("nextBtn")[0], 
 
     prevBtn = document.getElementsByClassName("prevBtn")[0]; 
 

 
    var i = 0; 
 

 
    var imgList = document.querySelectorAll(".slide"); 
 
    var slideLength = imgList.length; 
 
    var lastchild = imgList[slideLength - 1]; 
 
    nextBtn.addEventListener("click", Next, false); 
 
    prevBtn.addEventListener("click", Previous, false); 
 

 

 
    function Next() { 
 
     console.log(slideLength) 
 
     imgList[i].style.marginLeft = "-600px"; 
 
     if (imgList[i].classList.contains("active")) { 
 
      imgList[i].classList.remove("active"); 
 
     } 
 
     if (imgList[i] !== lastchild) { 
 
      i++; 
 
     } 
 
     else if (imgList[i] === lastchild) { 
 
      i = 0; 
 
      for (var j = 0; j < slideLength; j++) { 
 
       imgList[j].style.marginLeft = "0"; 
 
      } 
 
     } 
 
     imgList[i].classList.add("active"); 
 
    } 
 

 
    function Previous(e) { 
 
     console.log(i); 
 
     if (i !== 0) { 
 
      imgList[i - 1].style.marginLeft = "0"; 
 
      i--; 
 
      console.log(i); 
 
     } 
 
     else { 
 
      console.log(i); 
 
     } 
 
    } 
 
}

ul{ 
 
    width: 100%; 
 
    height: 350px; 
 
    border: solid 3px white; 
 
    margin:100px auto; 
 
    overflow: hidden; 
 
} 
 
li{ 
 
    display:inline-block; 
 
    position: relative; 
 
    transition: all 1s cubic-bezier(1,-0.01, 0, 1.13); 
 
    list-style: none; 
 

 
} 
 

 
li img{ 
 
    width:600px; 
 
    height:350px 
 
} 
 

 

 
.slide h2{ 
 
     position: absolute; 
 
    bottom:80px; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    left: 250px; 
 
    color: #fff; 
 
    font-size: 4em; 
 
    font-weight: 900; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
\t <div class="container"> 
 
\t \t <ul class="slide-wrapper"> 
 
\t \t \t <li class="slide active"> 
 
\t \t \t \t <img src="http://placehold.it/350x150" alt=""> 
 
\t \t \t \t <h2>1</h2> 
 
\t \t \t </li> 
 
\t \t \t <li class="slide"> 
 
\t \t \t \t <img src="http://placehold.it/350x150" alt=""> 
 
\t \t \t \t <h2>2</h2> 
 

 
\t \t \t </li> 
 
\t \t \t <li class="slide"> 
 
\t \t \t \t <img src="http://placehold.it/350x150" alt=""> 
 
\t \t \t \t <h2>3</h2> 
 

 
\t \t \t </li> 
 
\t \t \t <li class="slide"> 
 
\t \t \t \t <img src="http://placehold.it/350x150" alt=""> 
 
\t \t \t \t <h2>4</h2> 
 

 
\t \t \t </li> 
 
\t \t \t <li class="slide"> 
 
\t \t \t \t <img src="http://placehold.it/350x150" alt=""> 
 
\t \t \t \t <h2>5</h2> 
 

 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </div> 
 

 

 
<!--<div class="test"> 
 

 
</div>--> 
 
\t <button class="nextBtn">Next</button> 
 
\t <button class="prevBtn">Previous</button>

我怎样才能使这项工作做得很好严格香草的JavaScript？这里是链接到jsfiddle。然而，它似乎并没有在那里工作。

来源

2017-01-10 ibnhamza

你可以创建和共享JS的小提琴吗？我一定会帮你的。 – Abhinav

@Abhinav我已经用jsfiddle的链接更新了这个问题。 – ibnhamza

固定小提琴链接：https：//jsfiddle.net/a2bk4bwu/3/顺便说一句，比js更多的CSS问题。而且，关于这一点：“另外，当我看到最后一张图像并点击下一张图像时，应该返回到第一张图像，问题是它会沿着第一张图像的方向显示每张图像。”如果是这样，你必须完整地应用幻灯片的不同逻辑 - 并相应地更改css – sinisake

参考：https://jsfiddle.net/a2bk4bwu/3/

替换你的CSS与该线UL &李

ul{ 
    width: 100%; 
    height: 350px; 
    border: solid 3px white; 
    margin:100px auto; 
    overflow: hidden; 
    padding-left: 0; 
    font-size: 0px; 
} 
li{ 
    font-size : 20px; 
    display:inline-block; 
    position: relative; 
    transition: all 1s cubic-bezier(1,-0.01, 0, 1.13); 
    list-style: none; 
}

注意事项：

“UL公司被默认取微胖{webkit-padding-start：40px}
“display：inline-block”项目依赖于“空白”。所以给父元素“0px”删除幻灯片之间的空白。

这些将解决您的CSS问题。

来源

2017-01-10 13:33:53 Abhinav

这工作。我想我需要重写整个事情，它根本不流畅。谢谢 – ibnhamza

Javascript图像滑块无法正常工作

回答

相关问题