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 回答