Question

所以，我只是希望幻灯片中的图像之间有一个很好的淡入淡出。

我正在寻找一个简单的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>

Answer 1

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

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

{{1}}

Answer 2

你的意思是什么？

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 />

Answer 3

快速jQuery解决方案：

＆＃13;

$(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);
        });
     });
  }

});

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: