jquery - 创建幻灯片 - 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/

已添加<ul></ul>到 HTML 的底部。将以下内容添加到您的 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>');
}

现在您必须将其设计得像您想要的那样。

希望有帮助。