jQuery 幻灯片答案

【问题标题】：Jquery SlideshowjQuery 幻灯片
【发布时间】：2014-04-02 17:23:14
【问题描述】：

我制作了一个 jquery 幻灯片，代码如下：

HTML

<div id="slideshow">
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
</div>

<div id="previous">previous</div>

<div id="next">Next</div>

css

#slideshow {
    width: 700px;
    height: 400px;
    position: relative;
    overflow: hidden;
}

#slideshow img {
    position: absolute; 
}

jquery

$(document).ready(function() {
    $('#slideshow img:gt(0)').hide();

    $('#previous').click(function() {
        $('#slideshow img:first').fadeOut(1000).prev().fadeIn(1000).end().appendTo('#slideshow');
    });

    $('#next').click(function() {
        $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
    });
});

“下一个”按钮有效，但是当我单击“上一个”时，图像消失了！谁能帮帮我？

这里是fiddle。

【问题讨论】：

标签： jquery slideshow

【解决方案1】：

我认为不需要来回追加和前置元素。您可以将所需的index 淡化一个

DEMO

$(function() {

  var $img = $('#slideshow img');   // Cache your elements selector
  var c = 0; // counter // Represents the first image index to show
  var n = $img.length; // number of images

  $img.eq(c).siblings().hide(); // Target the 'c' one and hide it's siblings

  $('#previous, #next').click(function(){
     c = this.id=='next'? ++c : --c ;      // increase - decrease counter
     $img.fadeTo(1000,0).eq( c%n ).stop(1).fadeTo(1000,1); // Loop using reminder
  });

});

c 用作跟踪当前图像的index 的计数器，该图像可以使用.eq(index) 选择器以及所有兄弟姐妹使用.siblings() 选择器访问。

【讨论】：

@mahmoudnezarsarhan 你点击了“演示”链接吗？
@Roco 感谢这个精彩的答案，对不起，我第一次看到答案时我说“哦，这太复杂了，甚至重写它！”
@mahmoudnezarsarhan 这是上述内容的翻译：jsbin.com/xaxay/2/edit

【解决方案2】：

小提琴：http://jsfiddle.net/tAaCN/4/

由于您的选择器使用img:first，因此您不能使用.prev() 访问前一个元素，因为您已经在第一个子元素中。

您可以改为选择最后一个元素并将其“添加”为幻灯片的第一个子元素。

$(function() {
    $('#slideshow img:gt(0)').hide();

    $('#previous').click(function() {
        $('#slideshow img:first').fadeOut(1000);
        $('#slideshow img:last').fadeIn(1000).prependTo('#slideshow');
    });

    $('#next').click(function() {
        $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
    });
});

【讨论】：

【解决方案3】：

您的代码的问题是第一个的 prev() 不是最后一个。因此，当您查找第一个的 next() 元素时它会起作用，但不适用于第一个的 prev() 元素。

演示：http://jsfiddle.net/tAaCN/3/

 $(document).ready(function() {     
     $('#slideshow img:gt(0)').hide();

     $('#previous').click(function() {
        $('#slideshow img').first().fadeOut(1000).end().last().fadeIn(1000).prependTo('#slideshow');
     });

     $('#next').click(function() {
        $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
     });
 });

【讨论】：

【解决方案4】：

<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
</head>
<style>
    .slider{
        width: 400px;
        height: 400px;
        overflow:hidden;
        margin:auto;
        padding-top:50px;
    }
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

<script>
    $(document).ready(function(){
       $(window).load(function(){
        $('.slider #img1').show("fade",500);
        $('.slider #img1').delay(4500).hide("slide",{direction:'left'},500);

        var sc=$('.slider img').size();
        var count=2;

        setInterval(function(){
           $('.slider #img'+count).show("fade",500);
           $('.slider #img'+count).delay(4500).hide("slide",{direction:'left'},500);

           if (count==sc) {
            count=1;
           }else{
            count=count+1;
           }
        },11000);

        });
    });
</script>

<body>
<div class="slider">
    <img id="img1" src="4.jpg" style="width: 400px;height: 400px;"/>
    <img id ="img2" src="5.jpg" style="width: 400px;height: 400px;"/>
    <img id="img3" src="6.png" style="width: 400px;height: 400px;"/>
</div>

</body>
</html>

【讨论】：

请避免仅使用代码的答案。为您的答案添加解释。