Creating slideshow - Jquery

问题

I have this very simple slideshow here: http://jsfiddle.net/Jtec5/
Here's the codes:
HTML:

<div id="slideshow">
   <div>
     <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     <img src="http://gillespaquette.ca/images/stack-icon.png">
   </div>
</div>

CSS:

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

Jquery:

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

I'm trying to add the circles that tells me in which photo the slideshow is and how many photos there's in the slideshow, like those circles:

And also I'm unable to do that the pictures gets in the slideshow box and do not get off it(use fixed width and height for the slideshow and a script fix the width and height of the photo or just cut it to be inside the frame of the slideshow of the box and do NOT get off it), what I mean I don't want the photos to be shown like that:

回答1:

You could do something like: http://jsfiddle.net/Jtec5/2/

Added <ul></ul> to the bottom of your HTML. Added the following to your CSS:

#slideshow img {
    max-width:240px;
    max-height:240px;
}
ul {
    list-style:none;
    margin:0px;
    padding:0px;
}
ul li {
    float:left;
    border-radius:10px;
    width:10px;
    height:10px;
    border:1px solid white;
    background:grey;
}
ul li.active {
    background:black;
}

And JS:

$("#slideshow > div:gt(0)").hide();

var index = 1;
var maxindex = $('#slideshow > div').length;

setInterval(function () {
    $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    $('ul li').removeClass('active');
    $('ul li:eq(' + index + ')').addClass('active');
    index = index < maxindex - 1 ? index + 1 : 0;
}, 3000);

for (var i = 0; i < maxindex; i++) {
    $('ul').append('<li class="' + (i == 0 ? 'active' : '') + '"></li>');
}

Now you going to have to style it a little bit like you want to have it.

Hope it helps.

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

标签

jquery

slideshow