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圖像滑塊轉換

回答

相關問題