1

基本上我想在第三张幻灯片结束后更改我用 CSS 设置的背景，然后是新幻灯片。所以它是这样的：3 张带背景的幻灯片，上面有文字，然后是只包含图片的新幻灯片。很抱歉与最终结果相差太远，但我已经搜索过，但找不到这样的示例。

JS：

<script type="text/javascript" language="javascript">
        $(function() {
            $('#carousel').carouFredSel({
                items: 1,
                    scroll: {
                        duration: 500,
                        timeoutDuration: 500,
                        easing: 'elastic'
                    }
                });

        });
    </script>

HTML：

<div id="wrapper">
<div style="background-image: url(artist_carole.jpg);">
    <div id="carousel">
        <div>
            <h3>Cupcake ipsum</h3>
        </div>
        <div>
            <h3>Sesame snaps</h3>
        </div>
        <div>
            <h3>Apple pie jelly</h3>
        </div>
    </div>

    <div id="foo3">

        <div><img src="files/artists/thumb_lettering_rania.jpg" /></div>
        <div>1</div>
        <div>2</div>
        <div>3</div>

    </div>

</div>

CSS 包括：

    #wrapper {
    background-color: #F4F0EE;
    border: 1px solid #ccd;
    width: 950px;
    height: 325px;
    padding-top: 25px;
    margin:10px 0 0 10px;
    overflow: hidden;
    border-radius: 10px;
}


#carousel > div {
    width: 400px;
    padding: 0 100px;
    height: 225px;
    float: left;
    overflow: hidden;
}

#carousel h3 {
    font-size: 30px;
    line-height: 30px;
    margin: 20px 0 20px 0;
}
4

0 回答 0