淡入淡出數組的圖像

Question

我試圖用一個數組中的其餘圖像切換出圖像列表。我有一個15張圖像的陣列，我顯示了其中的6個圖像，並且我需要逐個切換剩餘圖像的圖像。

var images = [ 
 
'<img class="wp-image-2443" src="http://2-story.com/wp-content/uploads/2012/07/ab-data.png" alt="ab Data" />', 
 
'<img class="wp-image-2444" src="http://2-story.com/wp-content/uploads/2012/07/american-transmission-company.png" alt="American Transmission Company" />', 
 
'<img class="wp-image-2445" src="http://2-story.com/wp-content/uploads/2012/07/arts-at-large.png" alt="Arts @ Large" />', 
 
'<img class="wp-image-2446" src="http://2-story.com/wp-content/uploads/2012/07/baseball-tomorrow.png" alt="Baseball Tomorrow" />', 
 
'<img class="wp-image-2447" src="http://2-story.com/wp-content/uploads/2012/07/brewers-community-foundation.png" alt="Brewers Community Foundation" />', 
 
'<img class="wp-image-2448" src="http://2-story.com/wp-content/uploads/2012/07/city-of-milwaukee.png" alt="City of Milwaukee" />', 
 
'<img class="wp-image-2449" src="http://2-story.com/wp-content/uploads/2012/07/columbia-stmarys-foundation.png" alt="Columbia St. Mary Foundation" />', 
 
'<img class="wp-image-2450" src="http://2-story.com/wp-content/uploads/2012/07/digestive-health-insurance.png" alt="Digestive Health Alliance" />', 
 
'<img class="wp-image-2451" src="http://2-story.com/wp-content/uploads/2012/07/dorner.png" alt="Dorner" />', 
 
'<img class="wp-image-2486" src="http://2-story.com/wp-content/uploads/2012/07/echelon-innovation-campus.png" alt="Echelon Innovation Campus" />', 
 
'<img class="wp-image-2452" src="http://2-story.com/wp-content/uploads/2012/07/great-lakes-distillery.png" alt="Great Lakes Distillery" />', 
 
'<img class="wp-image-2453" src="http://2-story.com/wp-content/uploads/2012/07/habitati-for-humanity.png" alt="Habitat for Humanity" />', 
 
]; 
 
$(document).ready(function(){ 
 
    
 
    $.each(images, function(index, image) { 
 
    if (index > 5) { 
 
      return false; 
 
     } 
 
    
 
     $('.logo-container').append(image); 
 
    
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="logo-container"> 
 

 
</div>

Answer 1

，你在你的圖像想這是不完全的效果，但這樣做你正在試圖achieve.You後，它可以進行更改。

$(document).ready(function(){ 
 
var images = [ 
 
'<img class="wp-image-2443" src="http://2-story.com/wp-content/uploads/2012/07/ab-data.png" alt="ab Data" />', 
 
'<img class="wp-image-2444" src="http://2-story.com/wp-content/uploads/2012/07/american-transmission-company.png" alt="American Transmission Company" />', 
 
'<img class="wp-image-2445" src="http://2-story.com/wp-content/uploads/2012/07/arts-at-large.png" alt="Arts @ Large" />', 
 
'<img class="wp-image-2446" src="http://2-story.com/wp-content/uploads/2012/07/baseball-tomorrow.png" alt="Baseball Tomorrow" />', 
 
'<img class="wp-image-2447" src="http://2-story.com/wp-content/uploads/2012/07/brewers-community-foundation.png" alt="Brewers Community Foundation" />', 
 
'<img class="wp-image-2448" src="http://2-story.com/wp-content/uploads/2012/07/city-of-milwaukee.png" alt="City of Milwaukee" />', 
 
'<img class="wp-image-2449" src="http://2-story.com/wp-content/uploads/2012/07/columbia-stmarys-foundation.png" alt="Columbia St. Mary Foundation" />', 
 
'<img class="wp-image-2450" src="http://2-story.com/wp-content/uploads/2012/07/digestive-health-insurance.png" alt="Digestive Health Alliance" />', 
 
'<img class="wp-image-2451" src="http://2-story.com/wp-content/uploads/2012/07/dorner.png" alt="Dorner" />', 
 
'<img class="wp-image-2486" src="http://2-story.com/wp-content/uploads/2012/07/echelon-innovation-campus.png" alt="Echelon Innovation Campus" />', 
 
'<img class="wp-image-2452" src="http://2-story.com/wp-content/uploads/2012/07/great-lakes-distillery.png" alt="Great Lakes Distillery" />', 
 
'<img class="wp-image-2453" src="http://2-story.com/wp-content/uploads/2012/07/habitati-for-humanity.png" alt="Habitat for Humanity" />', 
 
]; 
 
var startingIndex = 0; 
 
var endIndex = 5; 
 
displayImages(images.slice(startingIndex, endIndex)); \t 
 
setInterval(function(){ 
 
\t if(endIndex >= images.length) endIndex = images.length/2; 
 
\t updateImages(images[endIndex]); 
 
\t endIndex++; 
 
}, 3000); 
 

 
function displayImages(imageArray){ 
 
    $.each(imageArray, function(index, image) {  
 
     $('.logo-container').append(image); 
 
    }); \t 
 
} 
 
function updateImages(image){ 
 
\t $('.logo-container img').first().fadeOut("slow", function(){ 
 
\t \t $(this).replaceWith(image); 
 
\t \t $(this).fadeIn("slow"); 
 
\t }); 
 
} \t 
 

 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="logo-container"> 
 

 
</div> \t 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</body> 
 
</html>