Javascript图像滑块无法正常工作

Question

我试图创建一个带控件的图像滑块＆＃34;下一步＆＃34;和＆＃34;以前＆＃34;。接下来应使用负边距左侧属性向左滑动图像，以显示第二个图像。所有包含单个图像的列表元素都设置为display: inline-block，因此每个列表元素可以彼此相邻而不是堆叠。

然而，我发现当第一张图片向左滑动时，它仍然会显示出一点点，同时显示第二张图像，在此之上和之后，所有内容都会滑动但从未完全展开。它们滑动的距离等于图像的宽度。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

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

			</li>
		</ul>
	</div>


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

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

＆＃13;

＆＃13;

＆＃13;

如何使用vanilla javascript严格控制此工作？这是jsfiddle的链接。但是，它似乎并没有起作用。

Answer 1

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

使用for ul＆amp; amp;替换你的CSS。利

private Activity HandleSystemMessage(Activity message)
    {
        if (message.Type == ActivityTypes.DeleteUserData)
        {
            // Implement user deletion here
            // If we handle user deletion, return a real message
        }
        else if (message.Type == ActivityTypes.ConversationUpdate)
        {
            // Not available in all channels
            string replyMessage = "Hi, <Custom Message>";
            return message.CreateReply(replyMessage);
        }
        else if (message.Type == ActivityTypes.ContactRelationUpdate)
        {
            // Handle add/remove from contact lists
            // Activity.From + Activity.Action represent what happened
        }
        else if (message.Type == ActivityTypes.Typing)
        {
            // Handle knowing that the user is typing
        }
        else if (message.Type == ActivityTypes.Ping)
        {
        }

        return null;
    }  

注意事项：

1. 'Ul'默认采取额外填充 {webkit-padding-start：40px}
2. “display：inline-block”项目取决于“white-space”。因此，将“0px”赋予父元素以删除幻灯片之间的空白区域。

这些将解决您的CSS问题。