[英]Adding next and prev buttons to my image slider
I would like to add a next and previous button to my image slider, but I'm not sure how to do so because I don't know how I would add them into a auto play slider. 我想在图像滑块上添加一个下一个和上一个按钮,但是我不确定该怎么做,因为我不知道如何将它们添加到自动播放滑块中。 I have a basic structure, any help? 我有一个基本的结构,有什么帮助吗?
My HTML: 我的HTML:
<div id="slider-container">
<div style="position: relative">
<div class="slide"><img id="slide_1" src="images/slide_1.jpg"/></div>
<div class="slide"><img id="slide_2" src="images/slide_2.jpg"/></div>
<div class="slide"><img id="slide_3" src="images/slide_3.jpg"/></div>
<div class="slide"><img id="slide_4" src="images/slide_4.jpg"/></div>
<div class="slide"><img id="slide_5" src="images/slide_5.jpg"/></div>
<div class="slide"><img id="slide_6" src="images/slide_6.jpg"/></div>
</div>
</div>
<img id="previous" src="images/prev.png">
<img id="next" src="images/next.png">
My CSS: 我的CSS:
.slide-container
{
display: block;
}
.slide
{
top: 0;
width: 760px;
height: 420px;
display: block;
position: absolute;
transform: scale(0);
transition: all .7s
}
.slide img
{
width: 100%;
height: 100%;
border-radius: 6px;
border: 1px solid #95ca1a;
}
My jQuery: 我的jQuery:
$(document).ready(function() {
(function (){
var count = $(".slide > img").length;
var current = 1;
var sliderNext = 2;
$("img[id^='slide_']").fadeOut(0);
$("#slide_" + current).fadeIn(300);
var loop = setInterval(function() {
$("#slide_" + current).fadeOut(300);
$("#slide_" + sliderNext).fadeIn(300);
$('#next').click(function(){
$("img[id^='slide_']" + sliderNext).fadeIn(300);
(sliderNext >= count) ? sliderNext = 1 : sliderNext++;
(current >= count) ? current = 1 : current++;
}, 3000)
})()
});
You need to refactor your code, one would be to move your current setInterval function into a next image function, then create a previous image function. 您需要重构代码,其中之一就是将当前的setInterval函数移至下一个图像函数,然后创建上一个图像函数。 On click you would want to re-initialise your timer then trigger the correct previous or next function. 单击时,您想重新初始化计时器,然后触发正确的上一个或下一个功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.