javascript を用いて背景画像を一定の時間ごとに順番に表示切り替えする方法

Question

スマホ版とpc版とで背景画像を10秒毎に自動で切り替え、画像が切り替わる際は1秒かけてフェードイン/アウトさせたいです。
jquery は用いずjavasript で動かす方法を知りたいです。

<header></header>

header {
  height:700px;
  background-image: img/image01;
  background-size: cover;
  background-position: center;
   @media screen and (max-width: 480px) {
    height:500px;
    background-image: img/sp-image01
  }
}

教えて頂きたいです。
よろしくお願いいたします。

Comments

[hentaiman]

jqueryは分かるけどjavascriptで書くにはどうしたら良いかと言う質問ですか？
現状の内容では丸投げなので低評価しましたが、jqueryなら分かるという意味ならjqueryのみで他のライブラリを使わず直接書いた場合のコードを載せてください