CSS滑塊中的JS過渡

Question

我在我的代碼中有一個滑塊，它需要過渡，但它不起作用。

這裏是JS代碼 它也不能在CSS中工作... 當圖像變化時它需要轉換。我需要在滑塊中緩慢更改圖像。

其實我在JS嘗試這樣做：

document.getElementById("img").style.transition = "5s ease"; 

這裏是HTML

 <div class="photo_div"> 
      <img id="img" src=""> 
     </div> 
     <button onclick="prev()">PREV</button> 
     <button onclick="next()">NEXT</button> 
    </div> 

這裏是JS

var names = ["img1.jpg", "img2.jpg", "img3.jpg"]; 
 
var index = 0; 
 

 
function init() { 
 
    document.getElementById("img").src = "photo/" + names[index]; 
 
    autoSlide(); 
 
} 
 

 
function next() { 
 
    index++; 
 
    if (index == names.length) { 
 
     index = 0; 
 
    } 
 
    document.getElementById("img").src = "photo/" + names[index]; 
 
    
 

 
} 
 

 
function prev() { 
 

 
    if (index == 0) { 
 
     index = names.length 
 
    } 
 
    index--; 
 

 
    document.getElementById("img").src = "photo/" + names[index]; 
 

 
} 
 

 
function autoSlide() { 
 
    if (index < names.length) { 
 
     setInterval(function() { 
 
     \t next(); 
 
     }, 3000); 
 
    } 
 
}

Answer 1

在下一個和prev函數中淡出圖像 - 並將排隊設置爲true，然後更改圖像，然後淡入img標記。

您可以嘗試以下操作，並且類似於prev：

function next() { 
 
    index++; 
 
    if (index == names.length) { 
 
     index = 0; 
 
    } 
 
    
 
    $('#img').fadeOut("slow", "linear", function(){ 
 
     document.getElementById("img").src = "photo/" + names[index]; 
 
     $('#img').fadeIn("slow", "linear"); 
 
    }); 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果你不能使用jQuery，也許看看this。