jQuery 带有左右按钮的非常简单的图像滑块/幻灯片。没有自动播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16761868/
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
Very Simple Image Slider/Slideshow with left and right button. No autoplay
提问by bob
I'm trying to make a very, very simple image slider/slideshow with no autoplay please. I only want to go to next or prev image on click. Having some issues as you can read below.
我正在尝试制作一个非常非常简单的图像滑块/幻灯片，请不要自动播放。我只想点击下一个或上一个图像。有一些问题，您可以在下面阅读。
Here's the jsFiddlehttp://jsfiddle.net/HsEne/12/(i just used background colors instead of images in the fiddle as well as switched img to divs but it's the exact same problem of course)
这是jsFiddle http://jsfiddle.net/HsEne/12/（我只是在小提琴中使用背景颜色而不是图像以及将 img 切换到 div 但它当然是完全相同的问题）
The HTML:
HTML：
<div id="slider-wrapper">
<div id="slider">
<img class="sp" src="/img1.jpg">
<img class="sp" src="/img2.jpg">
<img class="sp" src="/img3.jpg">
<img class="sp" src="/img4.jpg">
<img class="sp" src="/img5.jpg">
<img class="sp" src="/img6.jpg">
</div>
<img id="button-previous" src="/button-arrow-left.jpg">
<img id="button-next" src="/button-arrow-right.jpg">
</div>
The CSS:
CSS：
#slider-wrapper {
display: block;
max-width: 790px;
margin: 5% auto;
max-height: 500px;
height: 100%; }
#slider {
display: block;
position: relative;
z-index: 99999;
max-width: 710px;
width: 100%;
margin: 0 auto; }
#button-previous {
position: relative;
left: 0;
margin-top: 40%;
width: 40px;
height: 60px; }
#button-next {
position: relative;
margin-top: 40%;
float: right; }
.sp {
position: absolute; }
#slider .sp {
max-width: 710px;
width: 100%;
max-height: 500px; }
jQuery for next button:
下一个按钮的jQuery：
jQuery("document").ready(function(){
jQuery("#slider > img:gt(0)").hide();
jQuery("#button-next").click(function() {
jQuery("#slider > img:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.appendTo("#slider");
});
});
The above jQuery works fine, except it skips the first image if a user clicks the next button on last slide. It only displays the first image one time, all other images will keep sliding every time next is clicked. For some reason display: none gets added to the first image but I don't know where that code is coming from.
上面的 jQuery 工作正常，但如果用户单击最后一张幻灯片上的下一个按钮，它会跳过第一张图像。它只显示第一张图片一次，所有其他图片每次点击下一次时都会继续滑动。出于某种原因 display: none 被添加到第一张图像但我不知道该代码来自哪里。
jQuery for previous button:
上一个按钮的 jQuery：
jQuery("document").ready(function(){
jQuery("#slider > img:gt(0)").hide();
jQuery("#button-previous").click(function() {
jQuery("#slider > img:last")
.fadeOut(1000)
.next()
.fadeIn(1000)
.appendTo("#slider");
});
});
This jquery code above will return the just previewed image like it should. But when clicked again it doesn't do anything.
上面的这个 jquery 代码将返回刚刚预览的图像，就像它应该的那样。但是当再次点击时，它不会做任何事情。
I also tried .prev() in replace of .next(). It works fine the first time you click on the previous button. Say we are viewing Image #4. When I click previous button it goes to Image #3, like it should. But when click on it again it doesn't go to Image #2, it goes back to Image #4 , and then #3 and then #4, repeating itself.
我也试过用 .prev() 代替 .next()。第一次单击上一个按钮时它工作正常。假设我们正在查看图像 #4。当我单击上一个按钮时，它会转到图像 #3，就像它应该的那样。但是当再次单击它时，它不会转到图像 #2，而是返回图像 #4，然后是 #3，然后是 #4，重复自身。
回答by James
After reading your comment on my previous answer I thought I might put this as a separate answer.
在阅读了您对我之前的回答的评论后，我想我可以把它作为一个单独的答案。
Although I appreciate your approach of trying to do it manually to get a better grasp on jQuery I do still emphasise the merit in using existing frameworks.
虽然我很欣赏你尝试手动完成以更好地掌握 jQuery 的方法，但我仍然强调使用现有框架的优点。
That said, here is a solution. I've modified some of your css and and HTML just to make it easier for me to work with
也就是说，这是一个解决方案。我修改了你的一些 css 和 HTML 只是为了让我更容易使用
WORKING JS FIDDLE- http://jsfiddle.net/HsEne/15/
工作 JS 小提琴- http://jsfiddle.net/HsEne/15/
This is the jQuery
这是 jQuery
$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('#button-next').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':last-child')) {
$('.sp').first().addClass('active');
}
else{
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
$('#button-previous').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':first-child')) {
$('.sp').last().addClass('active');
}
else{
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
});
So now the explanation.
Stage 1
1) Load the script on document ready.
所以现在解释。
阶段 1
1) 在文档就绪时加载脚本。
2) Grab the first slide and add a class 'active' to it so we know which slide we are dealing with.
2) 抓取第一张幻灯片并向其添加一个“活动”类，以便我们知道我们正在处理哪张幻灯片。
3) Hide all slides and show active slide. So now slide #1 is display block and all the rest are display:none;
3) 隐藏所有幻灯片并显示活动幻灯片。所以现在幻灯片 #1 是显示块，其余的都是 display:none;
Stage 2Working with the button-next click event.
1) Remove the current active class from the slide that will be disappearing and give it the class oldActive so we know that it is on it's way out.
阶段 2使用按钮下一个点击事件。
1) 从将要消失的幻灯片中删除当前活动的类，并给它类 oldActive，这样我们就知道它正在消失。
2) Next is an if statement to check if we are at the end of the slideshow and need to return to the start again. It checks if oldActive (i.e. the outgoing slide) is the last child. If it is, then go back to the first child and make it 'active'. If it's not the last child, then just grab the next element (using .next() ) and give it class active.
2) 接下来是一个 if 语句，用于检查我们是否在幻灯片的结尾，是否需要再次返回开始。它检查 oldActive（即传出幻灯片）是否是最后一个孩子。如果是，则返回到第一个孩子并使其“活跃”。如果它不是最后一个孩子，那么只需获取下一个元素（使用 .next() ）并给它类 active。
3) We remove the class oldActive because it's no longer needed.
3) 我们删除了 oldActive 类，因为它不再需要了。
4) fadeOut all of the slides
4）淡出所有的幻灯片
5) fade In the active slides
5）淡入活动幻灯片
Step 3
第 3 步
Same as in step two but using some reverse logic for traversing through the elements backwards.
与第二步相同，但使用一些反向逻辑来向后遍历元素。
It's important to note there are thousands of ways you can achieve this. This is merely my take on the situation.
重要的是要注意，您可以通过数千种方法来实现这一目标。这只是我对这种情况的看法。
回答by James
Why try to reinvent the wheel? There are more lightweight jQuery slideshow solutions out there then you could poke a stick at, and someone has already done the hard work for you and thought about issues that you might run into (cross-browser compatability etc).
为什么要尝试重新发明轮子？那里有更多轻量级的 jQuery 幻灯片解决方案，你可以戳一下，有人已经为你完成了艰苦的工作，并考虑了你可能遇到的问题（跨浏览器兼容性等）。
jQuery Cycleis one of my favourite light weight libraries.
jQuery Cycle是我最喜欢的轻量级库之一。
What you want to achieve could be done in just
您想要实现的目标可以在短短的时间内完成
jQuery("#slideshow").cycle({
timeout:0, // no autoplay
fx: 'fade', //fade effect, although there are heaps
next: '#next',
prev: '#prev'
});
回答by Kaushal Sachan
Very simple code to make jquery slider Here is two div first is the slider viewer and second is the image list container. Just copy paste the code and customise with css.
制作jquery滑块的非常简单的代码这里有两个div，第一个是滑块查看器，第二个是图像列表容器。只需复制粘贴代码并使用 css 自定义即可。
<div class="featured-image" style="height:300px">
<img id="thumbnail" src="01.jpg"/>
</div>
<div class="post-margin" style="margin:10px 0px; padding:0px;" id="thumblist">
<img src='01.jpg'>
<img src='02.jpg'>
<img src='03.jpg'>
<img src='04.jpg'>
</div>
<script type="text/javascript">
function changeThumbnail()
{
$("#thumbnail").fadeOut(200);
var path=$("#thumbnail").attr('src');
var arr= new Array(); var i=0;
$("#thumblist img").each(function(index, element) {
arr[i]=$(this).attr('src');
i++;
});
var index= arr.indexOf(path);
if(index==(arr.length-1))
path=arr[0];
else
path=arr[index+1];
$("#thumbnail").attr('src',path).fadeIn(200);
setTimeout(changeThumbnail, 5000);
}
setTimeout(changeThumbnail, 5000);
</script>
回答by Kaushal Sachan
<script type="text/javascript">
$(document).ready(function(e) {
$(".mqimg").mouseover(function()
{
$("#imgprev").animate({height: "250px",width: "70%",left: "15%"},100).html("<img src='"+$(this).attr('src')+"' width='100%' height='100%' />");
})
$(".mqimg").mouseout(function()
{
$("#imgprev").animate({height: "0px",width: "0%",left: "50%"},100);
})
});
</script>
<style>
.mqimg{ cursor:pointer;}
</style>
<div style="position:relative; width:100%; height:1px; text-align:center;">`enter code here`
<div id="imgprev" style="position:absolute; display:block; box-shadow:2px 5px 10px #333; width:70%; height:0px; background:#999; left:15%; bottom:15px; "></div>
<img class='mqimg' src='spppimages/1.jpg' height='100px' />
<img class='mqimg' src='spppimages/2.jpg' height='100px' />
<img class='mqimg' src='spppimages/3.jpg' height='100px' />
<img class='mqimg' src='spppimages/4.jpg' height='100px' />
<img class='mqimg' src='spppimages/5.jpg' height='100px' />
