Javascript图像滑块转换

我正在查找代码，它在图片更改后添加了一个转换。这里是我的代码：Javascript图像滑块转换

<script type = "text/javascript"> 
    function displayNextImage() { 
     x = (x === images.length - 1) ? 0 : x + 1; 
     document.getElementById("img").src = images[x]; 
    } 

    function displayPreviousImage() { 
     x = (x <= 0) ? images.length - 1 : x - 1; 
     document.getElementById("img").src = images[x]; 
    } 

    function startTimer() { 
     setInterval(displayNextImage, 3000); 
    } 

var images = [], x = -1; 
images[0] = "1.jpg"; 
images[1] = "2.jpg"; 
images[2] = "3.jpg"; 
</script> 

<body onload = "startTimer()"> 
<img id="img" src="1.jpg"/> 
</body>

是否有任何可能的方式来添加一些过渡时的代码改变形象？

来源

2016-06-17 Vigi Menyhárt Gyula

不是在这里只有一个图像一起工作的工作示例。如果您想要转换，您需要创建第二个图像，以某种方式转换它，然后在转换结束时替换目标。 –

好的，谢谢 –

你可以看看[这个例子]（http://css3.bradshawenterprises.com/cfimg/）的灵感。 –

大约例如淡入效果必须是：

function fadeIn(elementId, miliseconds) { 
    var el = document.getElementById(elementId); 
    el.style.opacity = 0; 
    var op = parseFloat(0); 

    var timer = setInterval(function() { 
    if (op >= 1.0) 
     clearInterval(timer); 

    op += 0.1; 
    el.style.opacity = op; 
    }, miliseconds); 
}

Here你有你的代码和一些附加

来源

2016-06-17 11:06:37

感谢您的回答，先生，我已经看到您的代码，但似乎没有任何过渡。 –

@VigiMenyhártGyula对不起，我更新了一个简单的淡入淡出过渡的解决方案，玩这个你也可以得到一个淡出淡出，如果有任何帮助请投票支持 –

对不起，但你能解释更多的这段代码吗？我已经将它导入到我的项目中，但仍然没有发生。 –

Javascript图像滑块转换

回答

相关问题