Création de diaporama - Jquery

J'ai cette très simple diaporama ici: http://jsfiddle.net/Jtec5/
Voici les 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);

Je suis en train d'ajouter les cercles qui me dit que dans la photo, le diaporama est et combien de photos il y a dans le diaporama, à l'instar de ces cercles: Création de diaporama - Jquery

Et aussi, je suis incapable de faire les photos pénètre dans le diaporama de la boîte et ne pas descendre(utilisation fixe la largeur et la hauteur pour le diaporama et un script de fixer la largeur et la hauteur de la photo ou tout simplement couper à être à l'intérieur du cadre de la présentation de la boîte et ne PAS descendre), ce que je veux dire je ne veux pas les photos pour être montré comme ça: Création de diaporama - Jquery

Donc, avez-vous essayé d'appliquer toutes ces choses que vous voulez? Ou vous êtes en attente pour quelqu'un pour le faire pour vous?
Pouvez-vous essayer de penser un peu enchère? de la malédiction, je ne suis pas d'attente pour quelqu'un de le faire pour moi, et si je suis, je n'aurais pas fait le script du slideshow, je suis juste venu ici et il a dit "faire un diaporama pour moi"
Bien.. les images est simple, il suffit d'ajouter un max-width / max-hauteur avec un peu de CSS.
Ok, je vais résoudre ça, je suis incapable de trouver la solution pour les cercles :/

OriginalL'auteur System-x32z | 2013-08-14

  1. 5

    Vous pourriez faire quelque chose comme: http://jsfiddle.net/Jtec5/2/

    Ajouté <ul></ul> vers le bas de votre code HTML.
    Ajouté les lignes suivantes à votre fichier 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;
}

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

    Maintenant, vous allez avoir de style, un peu comme vous voulez l'avoir.

    Espère que cela aide.

    Merci beaucoup, c'est vraiment utile
    Une autre petite question, puis-je remplacer l'ul et li avec un autre éléments? parce que j'utilise dans mon code html
    Pouvez-vous m'aider?
    Oui, vous pouvez.. mais vous avez à relooker. Ce genre d'éléments?
    Je l'ai résolu, je vous remercie, je viens de changer l'ul, #ul et le style comme un cercle, merci

    OriginalL'auteur putvande