シンプルなバックグラウンドスライダがフェードあり

Question

ウェブサイトを編集しようとしています。私は素人のコーダーであり、次のような問題があります。

今、固定背景があるセクションがあるウェブサイトがあります。私は、5秒間に4〜5回転、退色する画像を背景にしたいと考えています。私はコードがHTMLファイルに示されている場合、これを行う方法を知っているだろうが、背景はスタイルCSSファイルに示されています。

<main class="main main-full main-startup" data-stellar-background-ratio="0.7" id="inicio"> 
 
    <div class="container"> 
 
    <div class="opener"> 
 
     <div class="text-center"> 
 
     <h1 style="font-family: sackers" class="hidden-xs">TITLE</h1> 
 
     <h1 style="font-family: sackers; font-size:35px" class="hidden-sm hidden-md hidden-lg">TITLE</h1> 
 
     <h1 style="font-size:20px">Subtitle</h1> 
 
     <div class="lead-hr wow fadeIn"></div> 
 
     <p class="lead wow fadeInUp" data-wow-delay="0.3s">Another subtitle.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</main>

をそして、これは、このそれぞれのセクションのCSSです：HTMLを見てみてください

.main-startup{background:url("../img/bg/startup.jpg") 50% 0 no-repeat;background-size:cover;} 

私はどのようにCSSとHTMLを伝えるには考えていること私は5秒ごとに次のものにフェードする異なる写真のリストを表示したい。誰か助けてくれますか？

ありがとうございます！

編集：私は、次のjQueryを試してみました

：

<script> 
$(function() { 
    var imageArray = ['BG-1.jpg', 'BG-2.jpg', 'BG-3.jpg', 'BG-4.jpg'] 

// on page load 
$('#inicio').css({ 'background-image': 'url(/img/slider/' + imageArray[Math.floor(Math.random() * imageArray.length)] + ')', 'background-size': 'cover' }) 

// every 10 seconds change to random image name in the array 
setInterval(function() { 
    $('#inicio').css({ 'background-image': 'url(/img/slider/' + imageArray[Math.floor(Math.random() * imageArray.length)] + ')', 'background-size': 'cover' }) 
    }, 10000); 
}); 
</script> 

しかし、それは動作しません。それはまだメインスタートアップのCSSコードに従っており、1つの背景画像しか表示しません。それを無視して追加したスクリプトに従うように指示する方法はわかりません！私は何ができるのか？

Answer 1

これは がhere

このリンクを試してみてくださいHTMLとCSSを使って画像スライダーのための最良の例であることも、これはあなたが達成したいもののサンプルです。このLink

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.