带有左右按钮的非常简单的图像滑块/幻灯片。没有自动播放

Question

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

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

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 被添加到第一张图片中，但我不知道该代码来自哪里。

上一个按钮的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 代码将返回刚刚预览的图像。但是当再次点击时它什么也没做。

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

Answer 1

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

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

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

WORKING 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 阶段
1) 将脚本加载到文档准备就绪。

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

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

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

2) Next 是一个 if 语句，用于检查我们是否处于幻灯片的结尾，是否需要重新回到开头。它检查 oldActive（即传出幻灯片）是否是最后一个孩子。如果是，则返回第一个孩子并使其“活跃”。如果它不是最后一个子元素，那么只需抓取下一个元素（使用 .next() ）并将其激活类。

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

4) 淡出所有幻灯片

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

第三步

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

请务必注意，您可以通过数千种方法来实现这一目标。这只是我对这种情况的看法。

Answer 2

为什么要重新发明轮子？有更多轻量级的 jQuery 幻灯片解决方案可供您参考，并且有人已经为您完成了艰苦的工作并考虑了您可能遇到的问题（跨浏览器兼容性等）。

jQuery Cycle 是我最喜欢的轻量级库之一。

你想要达到的目标可以做到

    jQuery("#slideshow").cycle({
    timeout:0, // no autoplay
    fx: 'fade', //fade effect, although there are heaps
    next: '#next',
    prev: '#prev'
    });

JSFIDDLE TO SEE HOW EASY IT IS

Answer 3

制作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>

Answer 4

<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' />