[英]Vanilla Javascript Slider Issue
I am trying to create simple vanilla Javascript slider but i am having some issues, hopefully someone can help me. 我正在尝试创建简单的普通Javascript滑块,但遇到了一些问题,希望有人可以帮助我。
html code : html代码:
<div class="box" id="boxid">
<div class="inside_box" id="inside_box_id">
<ul class="main_ul" id="main_ul_id">
<li class="one" id="oneid"><a href = "#"></a></li>
<li class="one" id="twoid"><a href = "#"></a></li>
<li class="one" id="threeid"><a href = "#"></a></li>
<li class="one" id="fourid"><a href = "#"></a></li>
<li class="one" id="fiveid"><a href = "#"></a></li>
</ul>
</div> <!-- end of inside_box -->
</div><!-- end of box -->
<button id="previd" class="btn">Prev</button>
<button id="nextid" class="btn">Next</button>
css code: CSS代码:
body {
background:grey;
font-family: sans-serif;
}
.box {
width:800px;
height:300px;
border:1px solid black;
margin: 0 auto;
}
.inside_box {
width:800px;
height:300px;
padding:0px;
margin:0px;
overflow: hidden;
}
.main_ul {
width:4000px;
padding:0px;
margin:0px;
}
.main_ul li {
list-style: none;
float:left;
}
.one {
width:800px;
height:300px;
}
#oneid {background:blue;}
#twoid {background:orange;}
#threeid {background:brown;}
#fourid {background:green;}
#fiveid {background:purple;}
.btn {
padding:10px;
width:100px;
margin-left:50%;
cursor: pointer;
margin-top:10px;
}
JS code JS代码
var prevBtn = document.getElementById("previd");
var nextBtn = document.getElementById("nextid");
nextBtn.addEventListener("click", function(){
var slideLeft = document.getElementById("main_ul_id");
slideLeft.style.marginLeft = "-800px";
}, false);
At the moment when i click the Next button it takes me to the second slide but when i click it again it doesnt do anything. 目前,当我单击“下一步”按钮时,它将带我到第二张幻灯片,但是当我再次单击它时,它什么也没做。 How can i make it so when i click it to margin-left 800px each time when it is clicked?
每次单击时如何将其单击以向左空白800px方向移动?
Thanks. 谢谢。
You need to get current value and subtract -800px
from it . 您需要获取当前值并
-800px
减去-800px
。
When you click Next button 1st time, it will set margin-left
as -800px
and you see the result. 第一次单击“下一步”按钮时,它将把
margin-left
设置为-800px
然后您会看到结果。 But for next press, it will again set margin-left
as -800px
. 但对于下一次按下,它将再次将
margin-left
设置为-800px
。
Something like below: 如下所示:
nextBtn.addEventListener("click", function() {
var slideLeft = document.getElementById("main_ul_id");
var style = slideLeft.style;
var totalImages = 5;
var margin = 800;
style.marginLeft = (parseInt(style.marginLeft || "0") - margin)%(totalImages*margin) + "px";
}, false);
Taking remainder with (totalImages*margin)
will bring the first slide after hitting next from the last slide. 用
(totalImages*margin)
取余数将在最后一张幻灯片上击中下一张后带来第一张幻灯片。 Not the optimal logic but just to give you an idea. 不是最佳逻辑,而只是给您一个想法。
Here's the working JSFiddle: https://jsfiddle.net/dsa3du93/7/ 这是工作中的JSFiddle: https ://jsfiddle.net/dsa3du93/7/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.