创建幻灯片 - 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>');
}

现在您必须将其样式设置为您想要的样式。

希望对你有帮助。