如何将上一个和下一个按钮添加到我的 jQuery 滑块？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16438088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add prev and next buttons to my jQuery slider?
提问by aztekgold
I have created a basic jQuery slider following a tutorial from TheHelpingDevelop. I have changed the slider to be a flexible width and made the images fade instead of slide.
我按照TheHelpingDevelop 的教程创建了一个基本的 jQuery 滑块。我已将滑块更改为灵活的宽度，并使图像淡化而不是滑动。
I would like to know how to incorporate previous and next buttons in the slider.
我想知道如何在滑块中合并上一个和下一个按钮。
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
.slider{
position: relative;
width:80%;
height:350px;
overflow: hidden;
margin: 30px auto;
}
.slider img{
width: 100%;
height: inherit;
display: none;
}
</style>
</head>
<body onload="slider()">
<div class="slider">
<img id="1" src="img/image1.png" border="0" alt="">
<img id="2" src="img/image2.png" border="0" alt="">
<img id="3" src="img/image3.png" border="0" alt="">
</div>
<script type="text/javascript">
function slider() {
$('.slider #1').fadeIn();
$('.slider #1').delay(5500).fadeOut();
var sc = $('#.slider img').size();
var count = 2;
var slider = $('.slider')
setInterval(function (){
$('.slider #'+count).fadeIn(500);
$('.slider #'+count).delay(5500).fadeOut();
if(count == sc){
count = 1;
}else{
count = count + 1;
}
},6500);
}
</script>
</body>
</html>
I would also like to know how to remove the gap between the fading image so that I do not see the background during transition. This would make the slider more fluent.
我还想知道如何消除渐变图像之间的间隙，以便在过渡期间看不到背景。这将使滑块更流畅。
See demo in JS Fiddle.
请参阅JS Fiddle 中的演示。
回答by Stano
Modified the code to adjust image opacity, positioned all images absolutely to common place, so now the transitions between two images can be animated. Added also simple next and previous controls.
修改代码以调整图像不透明度，将所有图像绝对定位到共同的位置，因此现在可以对两个图像之间的过渡进行动画处理。还添加了简单的下一个和上一个控件。
javascript:
javascript:
function slider() {
function animate_slider(){
$('.slider #'+shown).animate({
opacity:0 // fade out
},1000);
$('.slider #'+next_slide).animate({
opacity:1.0 // fade in
},1000);
shown = next_slide;
}
function choose_next() {
next_slide = (shown == sc)? 1:shown+1;
animate_slider();
}
$('.slider #1').css({opacity:1}); //show 1st image
var shown = 1;
var next_slide;
var sc = $('.slider img').length; // total images
var iv = setInterval(choose_next,3500);
$('.slider_nav').hover(function(){
clearInterval(iv); // stop animation
}, function() {
iv = setInterval(choose_next,3500); // resume animation
});
$('.slider_nav span').click(function(e){
var n = e.target.getAttribute('name');
if (n=='prev') {
next_slide = (shown == 1)? sc:shown-1;
} else if(n=='next') {
next_slide = (shown == sc)? 1:shown+1;
} else {
return;
}
animate_slider();
});
}
window.onload = slider;
additional HTML:
额外的 HTML：
<div class="slider_nav">
<span name="prev"> previous </span> /
<span name="next"> next image </span>
</div>
回答by mrReiha
i always use pure js , not jQuery ; but i explain to you , what you need to do ( hope this helps )
我总是使用纯 js，而不是 jQuery；但我向你解释，你需要做什么（希望这会有所帮助）
as yourself do that , you should put a variable in your code for image names or their id . now you should create a code to change the number of id , when user click on an element ! what is that element ? exactly the next or prev button ! like this :
正如你自己那样，你应该在你的代码中为图像名称或它们的 id 放置一个变量。现在你应该创建一个代码来改变 id 的数量，当用户点击一个元素时！那个元素是什么？正是下一个或上一个按钮！像这样 ：
nextButton.onclick=function(){
$('.slider #'+count).fadeOut();
count=count+1
$('.slider #'+count).fadeIn(slow);
}
it is a simple example ; you can do it at your own way . good luck ...
这是一个简单的例子；你可以按照自己的方式去做。祝你好运 ...
回答by rahul maindargi
See this http://jsfiddle.net/rKzxk/19/
看到这个 http://jsfiddle.net/rKzxk/19/
<body onload="slider()">
<div class="slider">
<img id="1" src="http://top-frog.com/stuff/slider/images/slider-test-image-1.gif" border="0" alt="">
<img id="2" src="http://top-frog.com/stuff/slider/images/slider-test-image-2.gif" border="0" alt="">
<img id="3" src="http://top-frog.com/stuff/slider/images/slider-test-image-3.gif" border="0" alt="">
</div>
<input type=button id="prev" value="Prev">
<input type=button id="next" value="Next">
</body>
Script
脚本
function slider() {
$('#1').fadeIn();
$('#1').delay(5500).fadeOut();
var sc = $('.slider img').size();
var count = 2;
var slider = $('.slider')
myTimer = setInterval(slide, 6500);
function slide() {
slideActual();
if (count == sc) {
count = 1;
} else {
count = count + 1;
}
}
function slideActual() {
$('#' + count).fadeIn(100);
$('#' + count).delay(5500).fadeOut(100);
}
$("#next").click(function () {
clearInterval(myTimer);
if(count==1){
$('#' + sc).fadeOut(100);
}else{
$('#' + count-1).fadeOut(100);
}
slideActual();
if (count == sc) {
count = 1;
} else {
count = count + 1;
}
myTimer = setInterval(slide, 6500);
});
$("#prev").click(function () {
if(count==1){
$('#' + sc).fadeOut(100);
}else{
$('#' + count-1).fadeOut(100);
}
if (count == 1) {
count = sc-1;
} else if (count == 2) {
count = sc;
} else {
count = count - 2;
}
clearInterval(myTimer);
slideActual();
if (count == sc) {
count = 1;
} else {
count = count + 1;
}
myTimer = setInterval(slide, 6500);
});
}
css
css
.slider {
position: relative;
width:80%;
height:350px;
overflow: hidden;
margin: 30px auto;
}
.slider img {
width: 100%;
height: inherit;
display: none;
}
