所以，我只是希望幻灯片中的图像之间有一个很好的淡入淡出。
我正在寻找一个简单的javascript或jquery函数来坚持到头脑中。 我没有自动播放，所以它只会在.onclick命令中的每个图像之间淡出。
任何帮助？
这里是小提琴：https://jsfiddle.net/usdvcy6d/
<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> / <a href="#" onclick="next(); return false;">Next</a></p><br>
</body>
</section>
</html>
答案 0 :(得分：0)
这是一个快速而肮脏的香草js尝试：https://jsfiddle.net/jmarikle/o1rkmxx0/
虽然确实有一些问题。您应该为这些图像使用预加载器。加载滞后会产生不良影响。
{{1}}
答案 1 :(得分：0)
你的意思是什么？
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> / <a id="btnNext" href="javascript:void 0">Next</a>
</p>
<br />
答案 2 :(得分：0)
快速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> / <a href="#" class="next">Next</a></p>
</section>