0

ここにこのスライドショーがあります: http://jsfiddle.net/Jtec5/4/
Codes: 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;
}

Jクエリ:

$("#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 の幅をautoに変更します

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