带有左右按钮的非常简单的图像滑块/幻灯片.没有自动播放 [英] Very Simple Image Slider/Slideshow with left and right button. No autoplay

问题描述

我正在尝试制作一个非常非常简单的图像滑块/幻灯片，请不要自动播放.我只想在点击时转到下一个或上一个图像.您可以在下面阅读一些问题.

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.

这里是 jsFiddle http://jsfiddle.net/HsEne/12/(我只是在小提琴中使用了背景颜色而不是图像，并将 img 切换为 div，但这当然是完全相同的问题)

Here's the jsFiddle http://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)

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>

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:

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");
  });
});

上面的 jQuery 工作正常，但如果用户单击最后一张幻灯片上的下一个按钮，它会跳过第一张图片.它只显示第一个图像一次，所有其他图像将在每次单击下一个时保持滑动.出于某种原因 display: none 被添加到第一张图片中，但我不知道该代码来自哪里.

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:

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");
  });
});

上面的这个 jquery 代码将返回刚刚预览的图像.但是当再次点击时它什么也没做.

This jquery code above will return the just previewed image like it should. But when clicked again it doesn't do anything.

我还尝试使用 .prev() 代替 .next().第一次单击上一个按钮时它工作正常.假设我们正在查看 Image #4.当我单击上一个按钮时，它会转到 Image #3，就像它应该的那样.但是当再次单击它时，它不会转到 Image #2，它会返回到 Image #4，然后是 #3，然后是 #4，不断重复.

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.

推荐答案

在阅读了您对我之前答案的评论后，我想我可以把它作为一个单独的答案.

After reading your comment on my previous answer I thought I might put this as a separate answer.

虽然我很欣赏您尝试手动执行以更好地掌握 jQuery 的方法，但我仍然强调使用现有框架的优点.

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.

也就是说，这是一个解决方案.我已经修改了你的一些 css 和 HTML，只是为了让我更容易使用

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

工作 JS FIDDLE - http://jsfiddle.net/HsEne/15/

这是 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();
    });




});

现在解释一下.
第一阶段
1) 将脚本加载到文档准备就绪.

So now the explanation.
Stage 1
1) Load the script on document ready.

2) 抓取第一张幻灯片并为其添加一个活动"类，以便我们知道我们正在处理哪张幻灯片.

2) Grab the first slide and add a class 'active' to it so we know which slide we are dealing with.

3) 隐藏所有幻灯片并显示活动幻灯片.所以现在幻灯片 #1 是显示块，其余的都是 display:none;

3) Hide all slides and show active slide. So now slide #1 is display block and all the rest are display:none;

第 2 阶段使用按钮下一次点击事件.
1) 从将要消失的幻灯片中删除当前活动的类，并将其赋予 oldActive 类，这样我们就知道它正在消失.

Stage 2 Working 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) Next 是一个 if 语句，用于检查我们是否在幻灯片结束时需要重新回到开头.它检查 oldActive(即传出幻灯片)是否是最后一个孩子.如果是，则返回第一个孩子并使其活跃".如果它不是最后一个子元素，那么只需抓取下一个元素(使用 .next() )并将其激活类.

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.

3) 我们删除了 oldActive 类，因为它不再需要.

3) We remove the class oldActive because it's no longer needed.

4) 淡出所有幻灯片

5) 在活动幻灯片中淡入淡出

5) fade In the active slides

第三步

与第二步相同，但使用一些反向逻辑来向后遍历元素.

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.

这篇关于带有左右按钮的非常简单的图像滑块/幻灯片.没有自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！