在导航幻灯片中的图像之间淡入淡出
Fading Between Images in Navigational Slideshow
所以，我只想在幻灯片中的图像之间有一个漂亮的淡入淡出。
我正在寻找一个简单的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>
这是一个
快速而肮脏的香草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);
}
Quick 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>你的意思是这样的吗？
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 />相关文章：
- Javascript将图像src更改为淡入淡出
- css(或jQuery）悬停时淡入淡出
- 将淡入淡出添加到“我的身体背景滑块”
- 多重潜水淡入淡出打开
- 添加/删除类淡入淡出不起作用
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- 页面加载跳转jquery淡入
- 在淡入淡出之间淡入淡出
- jQuery淡入淡出动画在两者之间显示白色
- 需要在两个背景之间添加淡入淡出效果
- 在导航幻灯片中的图像之间淡入淡出
- 淡入 在页面 html 之间淡出并使用数组脚本更改图像
- 淡入淡出动画，在列表项之间循环类
- 新旧子元素之间的反应过渡淡入淡出
- Jquery - 如何在 html 元素之间来回转换(淡入/淡出）并保持位置
- 在图像之间连续淡入淡出和旋转
- 在图像之间淡入淡出
- Javascript:在文本更改之间交叉淡入淡出文本
- 如何使用javascript在同一页面上的两个内容之间淡入淡出
- 淡入淡出图像之间没有黑色传输-JQuery
