如何在简单的 jquery 幻灯片代码中添加上一个和下一个按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17786805/
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 to add prev and next button in a simple jquery slideshow code
提问by Omzep
i have found this simple jQuerycode for a slideshow below from this blog.
我jQuery从这个博客中找到了下面这个幻灯片的简单代码。
http://leavesofcode.net/2012/08/17/simple-slideshow/
http://leavesofcode.net/2012/08/17/simple-slideshow/
It perfectly works in the project i am working on right now, where i can call the images with jQuery load()function and the slideshow still works. Although i would like to implement a previous and next button in the same code if its possible. Any help would be really appreciated. Please help thanks.
它完美地适用于我现在正在处理的项目中，在那里我可以调用具有jQuery load()功能的图像并且幻灯片仍然有效。尽管如果可能的话，我想在相同的代码中实现上一个和下一个按钮。任何帮助将非常感激。请帮忙谢谢。
Here is the code: http://jsfiddle.net/mblase75/CRUJJ/
这是代码：http: //jsfiddle.net/mblase75/CRUJJ/
<script>
$(document).ready(function() {
setInterval(function() {
var $curr = $('.slideshow img:visible'), // should be the first image
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
// if there isn't a next image, loop back to the first image
$next.css('z-index',2).fadeIn('slow', function() { // move it to the top
$curr.hide().css('z-index',0); // move this to the bottom
$next.css('z-index',1); // now move it to the middle
});
}, 6000); // milliseconds
});
</script>
<div class="slideshow">
<img src="first-image.jpg" width="500" height="100" alt="first image">
<img src="second-image.jpg" width="500" height="100" alt="second image">
<img src="third-image.jpg" width="500" height="100" alt="third image">
<img src="fourth-image.jpg" width="500" height="100" alt="fourth image">
</div>
<style>
.slideshow {
position: relative; /* necessary to absolutely position the images inside */
width: 500px; /* same as the images inside */
height: 100px;
}
.slideshow img {
position: absolute;
display: none;
}
.slideshow img:first-child {
display: block; /* overrides the previous style */
}
</style>
回答by cfs
You'll need to create functions for getNext and getPrev and attach those as event handlers to the elements you want to move you forward and backward through the slideshow.
您需要为 getNext 和 getPrev 创建函数，并将它们作为事件处理程序附加到要在幻灯片中前后移动的元素。
I created a common transition function which is shared by both the getNext and getPrev functions so that the transition code can be shared.
我创建了一个由 getNext 和 getPrev 函数共享的公共转换函数，以便可以共享转换代码。
In the below example, clicking the next or previous buttons will pause the slideshow, though it would be easy to change it to continue the automatic transitions.
在下面的示例中，单击下一个或上一个按钮将暂停幻灯片放映，但可以轻松更改它以继续自动转换。
var interval = undefined;
$(document).ready(function () {
interval = setInterval(getNext, 2000); // milliseconds
$('#next').on('click', getNext);
$('#prev').on('click', getPrev);
});
function getNext() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
transition($curr, $next);
}
function getPrev() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
transition($curr, $next);
}
function transition($curr, $next) {
clearInterval(interval);
$next.css('z-index', 2).fadeIn('slow', function () {
$curr.hide().css('z-index', 0);
$next.css('z-index', 1);
});
}
回答by AxelPAL
Use your code in click event of next button. Something like this:
在下一个按钮的单击事件中使用您的代码。像这样的东西：
$("#button_id").click(function(){
all your lines in **setInterval**
});
For previous button use .previnstead of .next
对于上一个按钮，使用.prev而不是.next
回答by Arni
responsive slideshow free jquery script
I used the above script in a project recently and its responsive, lightweight, fully customizable with or without buttons. My recommendation..
我最近在一个项目中使用了上面的脚本，它响应迅速、轻量级、完全可定制，带或不带按钮。我的建议..
回答by Alesanco
Add a couple of img in your HTML like this:
像这样在 HTML 中添加几个 img：
<div class="slideshow">
<img src="first-image.jpg" width="500" height="100" alt="first image">
<img src="second-image.jpg" width="500" height="100" alt="second image">
<img src="third-image.jpg" width="500" height="100" alt="third image">
<img src="fourth-image.jpg" width="500" height="100" alt="fourth image">
</div>
<img src="prev.jpg" width="50" height="50" id="imgPrev">
<img src="next.jpg" width="50" height="50" id="imgNext">
and change your javascript like this:
并像这样更改您的javascript：
$(document).ready(function() {
$("#imgNext").click(function() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
$next.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$next.css('z-index',1);
});
});
$("#imgPrev").click(function() {
var $curr = $('.slideshow img:visible'),
$prev = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
$prev.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$prev.css('z-index',1);
});
});
set
Interval(function() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
$next.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$next.css('z-index',1);
});
}, 6000); // milliseconds
});
I tried it with your code on fiddler and it works :)
我在 fiddler 上用你的代码试过了，它有效:)
回答by Shawn Rebelo
I know this is old, but correct the below:
我知道这是旧的，但更正以下内容：
$('.slideshow :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('#slideshow');
.slideshow {
width: 100%;
position: relative;
height: auto;
}
.slideshow img:first-child { position:relative; } /*auto height adjust*/
.slideshow img {
top: 0;
left: 0;
width: 100%;
max-width: 600px;
height: auto;
position: absolute;
}
Just trying to figure on a reverse. All the above are nice, but the transitions were, uh, not smooth. Using class's for a reason on this one.
只是想反着想。以上都很好，但过渡，呃，不顺利。出于这个原因使用类的。
回答by Arun Bertil
Try
尝试
$('.next').click(function(){
$('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
})
