フェードイメージのWebデザイン

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<style> 


body { 
    background-image: url("bg.jpg"); 


} 
<meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
ul { 
    list-style-type: none; 

    padding: 0; 
    overflow: hidden; 
    background-color: #000000; 
    margin-left:100px; 

} 

li { 
    float:left; 


} 

li a { 
    display: block; 
    color: white; 
    text-align: left; 
    padding: 14px 16px; 
    text-decoration: none; 



} 

li a:hover { 
    background-color: #000000; 

} 


img { 
    position: absolute; 
    margin-top:10px; 
    border: 1px solid #ccc; 


} 


img img { 
    width: 100%; 
    height: auto; 



} 

      img:nth-of-type(2){ 
       -webkit-animation: fadeInOut 15s linear 5s infinite; 

      } 
      img:nth-of-type(3){ 
       -webkit-animation: fadeInOut 15s linear 5s infinite; 
      } 
      img:nth-of-type(4){ 
       -webkit-animation: fadeInOut 15s linear 5s infinite; 
      } 
      img:nth-of-type(5){ 
       -webkit-animation: fadeInOut 15s linear 5s infinite; 
      } 




      @-webkit-keyframes fadeInOut{ 

      0% { opacity:1; } 
      17% { opacity:1; } 
      25% { opacity:0; } 
      92% { opacity:0; } 
      100% { opacity:1; } 

      } 
.image-wrapper { 
    position: relative; 
    height: 600px; // change to whatever works for you 
} 

.image { 
    position: absolute; 
    top: 50%; 
    border: 1px solid #ccc; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
} 
.container { width: 1000px; } 
.logo { 
    float: left; 
    width: 100px; 
    height: 50px; 

} 
.nav { 
    float: right; 
    width: 880px; 

} 


</style> 

<title>Badass Burgers</title> 

</head> 
<body style="height:1500px"> 




    <img class="logo" src='logo.jpg'/> 
<div class="container"> 


    <ul class="nav"> 

    <li><a class="active" href="homepage.php">Home</a></li> 
    <li><a href="info.php">About</a></li> 
    <li><a href="about.php">Team</a></li> 
    <li><a href="Menu.php">Menu</a></li> 
    <li><a href="book.php">Book A Table</a></li> 
    <li><a href="message.php">Message Us</a></li> 
</ul> 
    <div style="clear: both"></div> 
</div> 
<div class="image-wrapper"> 
    <img class="image" src='food1.jpg' width="1400" height="600" /> 
    <img class="image" src='Food2.jpg' width="1400" height="600" /> 
    <img class="image" src='Food3.jpg' width="1400" height="600" /> 
    <img class="image" src='Food4.jpg' width="1400" height="600" /> 
</div> 
</body> 
</html>

こんにちは、私はこれらの4つのイメージをフェードアウトしようとしています。これまで通りしかし、このコードを変更しようとしています。誰も方法を知っています 5秒後に各画像が変わるようなコードを変更しますか？助けが非常にお手頃ですフェードイメージのWebデザイン

出典

2016-04-07 chris

ブートストラップを使用している場合は、カルーセルを使用しないのはなぜですか。 – litel

私はcssとブートストラップに非常に新しいです。 plsを説明することができます – chris

ブートストラップのドキュメント[here]（http://getbootstrap.com/javascript/）を見てください。これはBootstrapが提供する多くの機能の1つで、これらの要素を作成する際に頭痛がでるように設計されています。 – litel

リールが言うように、ブートストラップカルーセルはあなたの例にとって完璧です。 W3スクールではブートストラップhereのチュートリアルがあります。これは私の最初のカルーセルを作るために使ったものです。

しかし、あなたの現在の状況であなたの質問に答えるには、CSSアニメーションではなく短いスクリプトで行う方がはるかに簡単だと思います。私はあなたの文書の最後に次のコードを追加し、それはあなたが求めていたことをしたようでした。希望が役立ちます。

<style> 
.image-wrapper .image{ 
    display: none; /*Hide the images to begin with*/ 
} 
</style> 
<script> 
var currentImage = 0; 
$(document).ready(function(){ 
imageChanger(); /*First image fades in on page ready*/ 
setInterval(imageChanger, 5000);}); /*set a timer of 5000ms for each subsequent image*/ 

function imageChanger(){ 
    $('.image-wrapper img').eq(currentImage).fadeOut(); 
    currentImage = (currentImage+1)%4; 
    $('.image-wrapper img').eq(currentImage).fadeIn(); 
} 
</script>

出典

2016-04-07 21:47:37 oldJoe

フェードイメージのWebデザイン

答えて

関連する問題