Question

我在这里有幻灯片：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;
}

Jquery的：

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

正如你所看到的，幻灯片中的图片不是很好，它的宽度非常高而且看起来非常宽，我正在寻找一个能够切割图片的代码，因此它看起来很好并且通常适合于幻灯片框的框架

Answer 1

你的意思是这样吗？

#slideshow {
  text-align: center;
}

并将#slideshow img

的宽度更改为自动

#slideshow img {
  width: auto;
  height: 200px;
  max-width: 100%;
  max-height: 200px;
}

幻灯片图片样式 - CSS

1 个答案: