0

プログレッシブ CSS を使用して、Web サイトの背景画像のスタイルを設定しています。jQuery を使用して画像を循環させるチュートリアルをいくつか見つけましたが、CSS を使用してそれを行うチュートリアルはまだ見たことがありません。それらはすべて HTML を使用しています。JqueryまたはJavascriptがdivを作成せずに画像を循環するようにするにはどうすればよいですか。

私のCSS：

html {
background: url('../assets/homepage.jpg') no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
4

2 に答える 2

0

背景画像を画面外にスライドさせ、変更してから元に戻してみてください。

<style>
html {
background: url('Image1.jpg') no-repeat center center fixed; 
background-size: cover;
}
</style>

 

<script type="text/javascript">
$(document).ready( function() {
    $('html').animate({
        "background-position": -2048
    },2000, function() {
        $('html').css('background-image',"url('Image2.jpg')");
        $('html').animate({
        "background-position": 0
        },2000);
    });
});
</script>
于 2013-02-06T19:36:28.417 に答える
0

確かにできますが、画像が変更されたときに遷移はありません。

html, html.slide1 {
    background: url('../assets/homepage1.jpg') no-repeat center center fixed; 
    /* add vendor prefixes */
    background-size: cover;
}
html.slide2 {
    background-image: url('../assets/homepage2.jpg');
}
html.slide3 {
    background-image: url('../assets/homepage3.jpg');
}

$(function () {
    var classList = ['slide1', 'slide2', 'slide3'],
        $html = $('html'),
        last = classList.length - 1,
        current = 0;

    setInterval(function () {
        current = current == last ? 0 : current + 1;
        $html.prop('class', classList[current]);
    }, 1000);
});

これがフィドルです：http://jsfiddle.net/rmR7V/

于 2013-02-06T19:21:53.797 に答える