0

大きな画像を含むjqueryスライドショーを「作成」できるかどうかを知りたいです。

たとえば、1900x260 の画像が大画面にある場合、すべての画像が表示されました。しかし、小さな解像度（1024）では、画像が中央に表示されます（応答しません!!、サイズ変更されません）。

助けてくれてありがとう。ファブリス

4

2 に答える 2

0

ありがとうございます。この記事の助けを借りて、これを行いました（正常に動作しているようです）：http://jonraasch.com/blog/a-simple-jquery-slideshow

私のコード:

<script type="text/javascript">

function slideSwitch() {

    var $active = $('#slideshow li.active');

    if ( $active.length == 0 ) $active = $('#slideshow li:last');
    var $next =  $active.next().length ? $active.next() : $('#slideshow li:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(document).ready(function() {
    setInterval( slideSwitch, 5000 );
});

</script>

CSS：

<style type="text/css">


ul {
    position: relative;
}


#home {
    background: url("1.jpg") center center no-repeat;
    height:263px;
}
#web {
    background: url("2.jpg") center center no-repeat;
    height:263px;
}
#design {
    background: url("3.jpg") center center no-repeat;
    height:263px;
}
#event {
    background: url("4.jpg") center center no-repeat;
    height:263px;
}

#slideshow li {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height: 263px;
     width:100%;
}

#slideshow li.active {
    z-index:10;
    opacity:1.0;
}

#slideshow li.last-active {
    z-index:9;
}

</style>

そして彼はHTML：

<div id="slideshow">
    <ul>
        <li id="home" class="active"></li>
        <li id="event"></li>
        <li id="web"></li>
        <li id="design"></li>
    </ul>    
</div>

それは問題なく動作しますが、今のところ、960gs (およびスティッキー フッター) を使用しており、多くの問題があります: #slideshow は絶対でなければなりません(ページの中央にプッシュする必要があります)。これを行うと、消えます:(。

助けはありますか？ありがとう

ファブ

于 2012-04-05T06:51:06.843 に答える
0

先に進むことはあまりありませんが、私は手足に出て、Supersized を提案します。

http://buildinternet.com/project/supersized/

于 2012-04-04T23:51:48.203 に答える