如何在此幻灯片中添加淡入/淡出？ [英] How to add fade in / fade out to this slideshow?
问题描述
大家好。我想知道是否有人知道一个简单的方法来添加淡入/淡出到这个幻灯片？它必须只在js中，没有css。这在同一页面上的多个位置使用，因此如果有任何需要唯一名称，请具体说明。提前致谢！
< img id =image1>
< script>
var imgArray1 = [
'images / someimage.jpg'，
'images / someimage.jpg'，
'images / someimage.jpg '，
'images / someimage.jpg']，
curIndex1 = 0;
imgDuration1 = 2500;
函数slideShow1（）$
document.getElementById（'image1'）。src = imgArray1 [curIndex1];
curIndex1 ++;
if（curIndex1 == imgArray1.length）{curIndex1 = 0; }
setTimeout（slideShow1（），imgDuration1）;
}
slideShow1（）;
< ; / script>
在这种情况下，最好使用jquery作为它对DOM元素有一些很酷的效果。但是，如果不能使用jquery，那么可以使用下面的解决方案。
< html >
< head > < / head >
< body >
< img id = image1 >
< script >
var imgArray1 = [
' paintings / 01.jpg'，
< span class =code-string>' paintings / 02.jpg'，
' paintings / 03.jpg'，
' paintings / 04.jpg']，
curIndex1 = 0 ，
imgFadeInDuration = 2500 ，imgFadeOutDuration = 2500 ，currentImage = document .getElementById（' image1'）;
function slideShow1（）{
currentImage.src = imgArray1 [curIndex1];
setOpacity（ 25 ）;
curIndex1 ++;
if （curIndex1 == imgArray1.length）{curIndex1 = 0 ; }
setTimeout（ slideShow1（），imgFadeInDuration + imgFadeOutDuration）;
fadeIn（）;
}
slideShow1（）;
function fadeOut（）{
// 摘要
// 模拟淡出效果
setTimeout（ function （）{
setOpacity（ 75 ）;
setTimeout（ function （）{
setOpacity（ 50 ）;
setTimeout（< span class =code-keyword> function （）{
setOpacity（ 25 ）;
setTimeout（ function （）{
setOpacity（ 12 ）;
}，imgFadeOutDuration / 16 ）;
}，imgFadeOutDuration / 8 ）;
}，imgFadeOutDuration / 4 ）;
}，imgFadeOutDuration / 2 ）;
}
function fadeIn（）{
// 摘要
// 模拟淡入淡出效果
setTimeout（ function （）{
setOpacity（ 25 ） ;
setTimeout（ function （）{
setOpacity（ 50 ）;
setTimeout（ function （）{
setOpacity（ 75 ）;
setTimeout （ function （）{
setOpacity（ 100 ）;
fadeOut（）;
}，imgFadeOutDuration / 16 ）;
}，imgFadeOutDuration / 8 ）;
}，imgFadeOutDuration / 4 ）;
}，imgFadeOutDuration / 2 ）;
}
function setOpacity（value）{
// 摘要
// 设置图像的不透明度
currentImage.style.opacity = +（值/ 100）; // Chrome& FF
currentImage.style.filter = alpha（opacity = + value + ）; // IE
}
< / script >
< / img > < / body >
< / html >
谢谢
Hi everyone. I was wondering if anyone knows an easy way to add a fade in / fade out to this slideshow? It has to be in js only, no css. This is used in multiple places on the same page, so if anything needs unique names, please be specific. Thanks in advance!
<img id="image1">
<script>
var imgArray1 = [
'images/someimage.jpg',
'images/someimage.jpg',
'images/someimage.jpg',
'images/someimage.jpg'],
curIndex1 = 0;
imgDuration1= 2500;
function slideShow1() {
document.getElementById('image1').src = imgArray1[curIndex1];
curIndex1++;
if (curIndex1 == imgArray1.length) { curIndex1 = 0; }
setTimeout("slideShow1()", imgDuration1);
}
slideShow1();
</script>
Hi,
In this scenario it is better to go with jquery as it has some cool effects for the DOM elements.However, if jquery cannot be used then below solution can be used.
<html> <head></head> <body> <img id="image1"> <script> var imgArray1 = [ 'paintings/01.jpg', 'paintings/02.jpg', 'paintings/03.jpg', 'paintings/04.jpg'], curIndex1 = 0, imgFadeInDuration= 2500,imgFadeOutDuration= 2500, currentImage = document.getElementById('image1'); function slideShow1() { currentImage.src = imgArray1[curIndex1]; setOpacity(25); curIndex1++; if (curIndex1 == imgArray1.length) { curIndex1 = 0; } setTimeout("slideShow1()", imgFadeInDuration + imgFadeOutDuration); fadeIn(); } slideShow1(); function fadeOut(){ //Summary //Simulate fadeout effect setTimeout(function() { setOpacity(75); setTimeout(function() { setOpacity(50); setTimeout(function() { setOpacity(25); setTimeout(function() { setOpacity(12); }, imgFadeOutDuration / 16); }, imgFadeOutDuration / 8); }, imgFadeOutDuration / 4); }, imgFadeOutDuration / 2); } function fadeIn(){ //Summary //Simulate fadeIn effect setTimeout(function() { setOpacity(25); setTimeout(function() { setOpacity(50); setTimeout(function() { setOpacity(75); setTimeout(function() { setOpacity(100); fadeOut(); }, imgFadeOutDuration / 16); }, imgFadeOutDuration / 8); }, imgFadeOutDuration / 4); }, imgFadeOutDuration / 2); } function setOpacity(value){ //summary //Set the opacity for the image currentImage.style.opacity = ""+(value/100); // Chrome & FF currentImage.style.filter= "alpha(opacity="+value+")"; // IE } </script> </img></body> </html>
Thanks
这篇关于如何在此幻灯片中添加淡入/淡出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
