Jquery carouFredsel - 在3张幻灯片结束时更改背景

时间:2012-10-23 14:07:34

标签: jquery background

基本上我想在第3张幻灯片结束后用随后的新幻灯片更改我用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;
}

0 个答案:

没有答案