Ich habe diese sehr einfache Diashow hier:http://jsfiddle.net/Jtec5/
Hier sind die 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; 
}

Abfrage:

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

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

Ich versuche, die Kreise hinzuzufügen, aus denen hervorgeht, auf welchem ​​Foto sich die Diashow befindet und wie viele Fotos sich in der Diashow befinden, wie diese Kreise:

Und ich kann auch nicht, dass die Bilder in die Diashow-Box gelangen und sie nicht verlassen (verwenden Sie feste Breite und Höhe für die Diashow und ein Skript, um die Breite und Höhe des Fotos zu korrigieren, oder schneiden Sie es einfach so aus, dass es sich innerhalb der befindet rahmen der diashow der box und steigen sie NICHT aus), was ich meine ich möchte nicht das die fotos so gezeigt werden: