3

我在这里有这个非常简单的幻灯片：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; 
}

查询：

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

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

我正在尝试添加圆圈，告诉我幻灯片在哪张照片中以及幻灯片中有多少张照片，比如那些圆圈：在此处输入图像描述

而且我也无法做到图片进入幻灯片框并且不离开它（使用固定宽度和高度的幻灯片和脚本修复照片的宽度和高度，或者只是将其剪切到里面盒子的幻灯片的框架，不要下车），我的意思是我不希望照片像这样显示：在此处输入图像描述

4

1 回答 1

5

你可以这样做：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>');
}

现在你必须把它设计得有点像你想要的那样。

希望能帮助到你。

于 2013-08-14T17:54:09.620 回答