导航幻灯片中图像之间的淡入淡出答案

【问题标题】：Fading Between Images in Navigational Slideshow导航幻灯片中图像之间的淡入淡出
【发布时间】：2016-02-19 05:24:51
【问题描述】：

所以，我只想在幻灯片中的图像之间进行漂亮的淡入淡出。

我正在寻找一个简单的 javascript 或 jquery 函数来插入头部。我没有自动播放，所以它只是在 .onclick 命令上的每个图像之间淡入淡出。

有什么帮助吗？

<html>
<head>
<script>
var imageGallery = [
"images/swanson-020.jpg" ,
"images/swanson-019.jpg" ,
"images/swanson-018.jpg" ,
"images/swanson-017.jpg" ,
"images/swanson-016.jpg" ,
"images/swanson-015.jpg" ,
"images/swanson-014.jpg" ,
"images/swanson-013.jpg" ,
"images/swanson-012.jpg" ,
"images/swanson-011.jpg" ,
"images/swanson-010.jpg" ,
"images/swanson-009.jpg" ,
"images/swanson-008.jpg" ,
"images/swanson-007.jpg" ,
"images/swanson-006.jpg" ,
"images/swanson-005.jpg" ,      
"images/swanson-004.jpg" ,
"images/swanson-003.jpg" ,
"images/swanson-002.jpg" ,
"images/swanson-001.jpg"
];
var imgCount = 0;
var totalImgs = imageGallery.length - 1;

function next() {
imgCount++;
if(imgCount > totalImgs) imgCount = 0
document.getElementById("slideshow").src = imageGallery[imgCount] ;
}

function previous() {
imgCount--;
if(imgCount < 0) imgCount = totalImgs ;
document.getElementById("slideshow").src = imageGallery[imgCount] ;    
} 
</script>
</head>
<body>
<section>
<img id="slideshow" src="images/swanson-029.jpg">
<p class="centeredparagraph"><a href="#" onclick="previous(); return false;">Back</a>&nbsp;/&nbsp;<a href="#" onclick="next(); return false;">Next</a></p><br>
</body>
</section>
</html>

【问题讨论】：

你可以尝试利用 jQuery 的“fadeIn”和“fadeOut”函数
有人知道好的预加载系统吗？

标签： javascript jquery image slideshow fade

【解决方案1】：

这是一个快速而肮脏的香草 js 尝试：https://jsfiddle.net/jmarikle/o1rkmxx0/

它确实有一些问题。您应该为这些图像使用预加载器。加载滞后会导致不良影响。

...

  var t = 0;

  function next() {
    if (t) return;
    imgCount++;
    if (imgCount > totalImgs) imgCount = 0
    document.getElementById("slideshow").src = imageGallery[imgCount];
  }

  function previous() {
    if (t) return;
    imgCount--;
    if (imgCount < 0) imgCount = totalImgs;
    document.getElementById("slideshow").src = imageGallery[imgCount];
  }

...

document.getElementById("slideshow").onload = function(){
  var obj = this;
  var nextSibling = obj.nextSibling;
  while(nextSibling && nextSibling.nodeType != 1) {
      nextSibling = nextSibling.nextSibling
  }
  nextSibling.className = 'fade';
  t = setTimeout(function(){
    nextSibling.className = '';
    nextSibling.src = obj.src;
    t = 0;
  }, 1000);
}

【讨论】：

【解决方案2】：

快速 jQuery 解决方案：

$(document).ready(function(){
  var imageGallery = [
    "http://josiahswanson.com/images/swanson-020.jpg",
    "http://josiahswanson.com/images/swanson-019.jpg",
    "http://josiahswanson.com/images/swanson-018.jpg",
    "http://josiahswanson.com/images/swanson-017.jpg",
    "http://josiahswanson.com/images/swanson-016.jpg",
    "http://josiahswanson.com/images/swanson-015.jpg",
    "http://josiahswanson.com/images/swanson-014.jpg",
    "http://josiahswanson.com/images/swanson-013.jpg",
    "http://josiahswanson.com/images/swanson-012.jpg",
    "http://josiahswanson.com/images/swanson-011.jpg",
    "http://josiahswanson.com/images/swanson-010.jpg",
    "http://josiahswanson.com/images/swanson-009.jpg",
    "http://josiahswanson.com/images/swanson-008.jpg",
    "http://josiahswanson.com/images/swanson-007.jpg",
    "http://josiahswanson.com/images/swanson-006.jpg",
    "http://josiahswanson.com/images/swanson-005.jpg",
    "http://josiahswanson.com/images/swanson-004.jpg",
    "http://josiahswanson.com/images/swanson-003.jpg",
    "http://josiahswanson.com/images/swanson-002.jpg",
    "http://josiahswanson.com/images/swanson-001.jpg"
  ];
  
  var currentImg = 0;
  var totalImgs = imageGallery.length - 1;

  $("a").click(function(e) {
     e.preventDefault();
     if($(this).is('.next')) {
        currentImg++;
        if (currentImg > totalImgs) currentImg = 0
     }
     else {
        currentImg--;
        if (currentImg < 0) currentImg = totalImgs;
     }
     showImg(imageGallery[currentImg]);
  });
  
  function showImg(img) {
     var $img = $("#slideshow");
     $img.fadeOut(400, function() {
    	$img.attr('src',img).load(function(){
      	   $img.fadeIn(400);
        });
     });
  }

});

section {
  margin: 0;
  padding: 0;
  width: 100%;
}

a {
  color: #33CCFF;
  font-family: 'Georgia', serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 28px;
  margin: 10px 0;
  padding: 2px;
  text-decoration: underline;
  width: 100%;
}

a:hover {
  color: #0066CC;
}

img {
  margin: 0;
  max-width: 100%;
  padding: 0;
  vertical-align: middle;
}

p {
  color: #000000;
  font-family: 'Georgia', serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 28px;
  margin: 10px 0;
  padding: 0 8%;
  width: 84%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section>
  <img id="slideshow" src="http://josiahswanson.com/images/swanson-029.jpg">
  <p class="centeredparagraph"><a class="prev" href="#">Back</a>&nbsp;/&nbsp;<a href="#" class="next">Next</a></p>
</section>

【讨论】：

【解决方案3】：

你的意思是这样的吗？

var imgGal = [ $('#slideshow').attr('src') ];	//	adds first image from page
// simple loop to add the rest of the images
for (var i=20;i>0;i--) imgGal.push('http://josiahswanson.com/images/swanson-0'+(i<10?'0'+i:i)+'.jpg');

//	preLoad images for cacheing for faster load on call
//  notice how they are purposly positioned completely out of view. 
//  this alows the browser to go ahead and load the images but maintain the view you want for the user experience
for (var x in imgGal) $('<img />', { src: imgGal[x], style: 'position:fixed;height:1px;width:1px;bottom:200%;right:200%;' }).appendTo($('body'))

$(document).on('click', '#btnPrev, #btnNext', function(e) {
	var $this = this,
        srcCur = $('#slideshow').attr('src'),  //  simply get currentimg source
		iNext = imgGal.indexOf(srcCur)+1,  //  determine next image index
		iPrev = imgGal.indexOf(srcCur)-1,  //  determine previous image index
		srcNext = iNext<imgGal.length?imgGal[iNext]:imgGal[0],  //  determine next image source to use
		srcPrev = iPrev>-1?imgGal[iPrev]:imgGal[imgGal.length-1];  //  determine previous image source to use
  //  finally, based on which is clicked,
  //  load the fade out the current img tag then load in the new source
  $('#slideshow').fadeOut(function() { $(this).attr('src', $this.id.match(/prev/i) ? srcPrev : srcNext) });
});

//  here's the key helper
//  this tells the img tag to fade in everytime an image is loaded into it
$('#slideshow').load(function(e) { $(this).fadeIn(); })

html {
  background-color: #FFFFFF;
  margin: 0;
  padding: 0;
}

body {
  margin: 0 auto 0;
  padding: 5%;
  max-width: 900px;
}

nav {
  margin: 10px 0;
  padding: 0;
  text-align: left;
  width: 100%;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin: 0 20px 0 0;
  padding: 0;
}

div.sidebar {
  float: inherit;
  width: 100%;
}

div.page {
  float: inherit;
  width: 100%;
}

section {
  margin: 0;
  padding: 0;
  width: 100%;
}

a {
  color: #33CCFF;
  font-family: 'Georgia', serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 28px;
  margin: 10px 0;
  padding: 2px;
  text-decoration: underline;
  width: 100%;
}

a:hover {
  color: #0066CC;
}

img {
  margin: 0;
  max-width: 100%;
  padding: 0;
  vertical-align: middle;
}

p {
  color: #000000;
  font-family: 'Georgia', serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 28px;
  margin: 10px 0;
  padding: 0 8%;
  width: 84%;
}

p.header {
  padding: 0;
  width: 100%;
}

u {
  color: #FF6633;
  font-size: 14px;
  text-decoration: none;
}

.centeredparagraph {
  text-align: center;
}

.footerparagraph {
  margin: 0;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}

.italic {
  font-style: italic;
}

.selectedlink {
  color: #0066CC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="slideshow" src="http://josiahswanson.com/images/swanson-029.jpg">
<p class="centeredparagraph">
  <a id="btnPrev" href="javascript:void 0">Back</a>&nbsp;/&nbsp;<a id="btnNext" href="javascript:void 0">Next</a>
</p>
<br />

【讨论】：