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。