褪色圖像網頁設計

<!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秒後改變？任何幫助非常appriciated褪色圖像網頁設計

來源

2016-04-07 chris

如果您使用的是Bootstrap，爲什麼不使用傳送帶？ – litel

即時通訊和引導非常新。你可以解釋一下 – chris

看看Bootstrap文檔[這裏]（http://getbootstrap.com/javascript/）。這是Bootstrap提供的許多功能之一，旨在消除創建這些元素的頭痛。 – litel

正如litel說，引導轉盤將是您的例子完美。 W3學校在Bootstrap 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

褪色圖像網頁設計

回答

相關問題