Jquery Slideshow | 易学教程

问题

I made a jquery slideshow and here is the code :

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

The "next" button works, but when I click "previous" the image disappears! Can anyone help me?

Here is the fiddle.

回答1:

Fiddle: http://jsfiddle.net/tAaCN/4/

Since your selector is using img:first, you cannot use .prev() to access the previous element since you are already at the first child.

You can instead select the last element and "prepend" it as a first child of the slideshow.

$(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');
    });
});

回答2:

I don't see the need for appending and prepending elements back and forth. You can just fade the needed index one

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 is used as a counter to keep track of the index of current image that can be than accessed using the .eq(index) selector, and all the siblings, well, using the .siblings() selector.

回答3:

The problem with your code was that prev() of first isn't last. So, it would work when you look for next() element of the first, but won't work for the prev() element of the first.

Demo : 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>

来源：https://stackoverflow.com/questions/22116664/jquery-slideshow

标签

jquery

slideshow