创建幻灯片 - Jquery

Question

我在这里有一个非常简单的幻灯片：http://jsfiddle.net/Jtec5/
这是代码：
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);

我正在尝试添加圈子，告诉我幻灯片显示的照片以及幻灯片中有多少张照片，例如这些圈子：

而且我也无法做到这一点，图片进入幻灯片显示框并且没有下载（使用固定的宽度和高度进行幻灯片放映和脚本修复照片的宽度和高度或者只是将其剪切为在框的幻灯片框架内，不要离开它，我的意思是我不希望照片显示如下：

Answer 1

您可以执行以下操作：http://jsfiddle.net/Jtec5/2/

在HTML底部添加了<ul></ul>。 在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;
}

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

现在你需要设计它有点像你想拥有它。

希望它有所帮助。