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

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

希望能帮助到你.