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 for next按钮：

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工作正常，但如果用户点击最后一张幻灯片上的下一个按钮，它会跳过第一张图片。它只显示第一个图像一次，所有其他图像将在每次单击时保持滑动。出于某种原因显示：没有添加到第一个图像，但我不知道该代码的来源。

jQuery for previous按钮：

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（）。第一次单击上一个按钮时，它工作正常。假设我们正在查看图像＃4。当我点击上一个按钮时，它会转到图像＃3，就像它应该的那样。但是当再次点击它时它不会转到图像＃2，它会回到图像＃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是显示块，所有其余的都显示：none;

第二阶段 使用按钮 - 下一次单击事件 1）从将要消失的幻灯片中删除当前活动类，并将其设置为oldActive类，以便我们知道它已经出现了。

2）接下来是一个if语句，用于检查我们是否在幻灯片结束时需要再次返回到开始状态。它检查oldActive（即传出幻灯片）是否是最后一个孩子。如果是，则返回第一个孩子并使其“活跃”。如果它不是最后一个孩子，那么只需抓住下一个元素（使用.next（））并激活它。

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

4）fadeOut所有幻灯片

5）淡入活动幻灯片

第3步

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

重要的是要注意有数千种方法可以实现这一目标。这仅仅是我对这种情况的看法。

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

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

4 个答案: