将下一个和上一个按钮添加到我的图像滑块
Posted
技术标签:
【中文标题】将下一个和上一个按钮添加到我的图像滑块【英文标题】:Adding next and prev buttons to my image slider 【发布时间】:2013-12-18 22:25:16 【问题描述】:我想在我的图像滑块中添加下一个和上一个按钮,但我不知道该怎么做,因为我不知道如何将它们添加到自动播放滑块中。我有一个基本结构,有什么帮助吗?
我的 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">
我的 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;
我的 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)
)()
);
【问题讨论】:
(function ())()
- $(document).ready()
中不需要。它在解析时执行,而不是在 domready 时执行。
你考虑过引导轮播吗?getbootstrap.com/javascript/#carousel
我会看看的,谢谢。
【参考方案1】:
你需要重构你的代码,一个是将你当前的 setInterval 函数移动到下一个图像函数中,然后创建一个前一个图像函数。单击时,您需要重新初始化计时器,然后触发正确的上一个或下一个功能。
【讨论】:
知道如何重新初始化计时器以继续自动播放吗? 为你的滑块设置一个 jsfiddle,我会帮忙以上是关于将下一个和上一个按钮添加到我的图像滑块的主要内容,如果未能解决你的问题,请参考以下文章