Question

我制作了一个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。

Answer 1

小提琴：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');
    });
});

Answer 2

我认为不需要来回追加和预先添加元素。您可以淡化所需的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)，以及所有兄弟姐妹，使用{ {1}}选择器。

Answer 3

你的代码的问题是first（）的第一个不是最后一个。因此，当您查找第一个的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');
     });
 });

Answer 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>

Jquery幻灯片

4 个答案: