●やりたいこと
webページの背景画像を数秒ごとに変わるような仕様にしたい。
●準備
画像ファイルimagesを作りその中にback1.png,back2.png,back3.pngを入れる。
html/cssで基本的なページを作る。
以下cssとhtmlとjsの記述。
htmlでjqueryをインポートするのを忘れない。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">
</script>body{
width: 100%;
height: 100%;
background: url("../images/back1.png") no-repeat fixed center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}$(function() {
var i = 1;
setInterval(function() {
if(i > 3) i = 1;
$("body").css("background","url('./images/back"+i+".png') no-repeat fixed center center");
i++;
}, 4000
);
});
