0

我在这里有这个幻灯片：http: //jsfiddle.net/Jtec5/4/
代码：Html：

<div id="slideshow">
    <div>
        <img src="http://images2.fanpop.com/image/photos/13800000/farrari-sports-cars-13821367-1280-960.jpg">
    </div>
    <div>
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSp3iWMAUsa3krPUVPJnxagcmb86YM59m1mAg6HbBnz_xrZlNr2">
    </div>
    <div>
        <img src="http://images4.fanpop.com/image/photos/17000000/KOENIGSEGG-CCXR-SPECIAL-EDITION-sports-cars-17058415-1920-1440.jpg">
    </div>
></div>
<div id="ul"></div>

CSS：

#slideshow {
    position: relative;
    height: 200px;
    padding: 7px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow > div {
    position: absolute;
    top: 7px;
    left: 7px;
    right: 7px;
    bottom: 7px;
}

#slideshow img {
    width: 100%;
    height: 200px;
    max-width: 100%;
    max-height: 200px;
}
#ul {
    border-radius: 20%;
    width: 50px;
    height: 50px; 
    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;
}

查询：

$("#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>');
}

如您所见，幻灯片中的图片不是很好，它的宽度很高，看起来很宽，我正在寻找一种代码来剪切图片，使其看起来很好并且通常适合幻灯片盒

4

1 回答 1

1

你的意思是这样吗？

#slideshow {
  text-align: center;
}

并将#slideshow img的宽度更改为自动

#slideshow img {
  width: auto;
  height: 200px;
  max-width: 100%;
  max-height: 200px;
}
于 2013-08-14T19:14:12.850 回答