傳遞一個不透明效果的圖像

我有這樣的代碼，將每3秒更換一次圖片（滑塊），我想添加淡入效果，但我似乎無法做到這一點。傳遞一個不透明效果的圖像

我看到的大部分內容都是使用像Jquery這樣的庫，我想使用純js。

這是代碼：

var slide = document.getElementsByClassName("slide"); 
var i = 0; 
var op = 0; 

function fadeIn(obj) { 
    if(op < 1) { 
     op += .1; 
     op = Math.round(op*10)/10; // this is because the op+=.1 gives me results .899999999... 
     obj.style.opacity = op; 
    } 
    setTimeout(fadeIn , 300); 
} 

function callbackSlider() { 

    if(typeof(slide[i-1]) === "object") { 
     slide[i-1].style.display = "none"; 
    } 

    slide[i].style.display = "inline"; 
    fadeIn(); 

    if(typeof(slide[i+1]) === "object") { 
     slide[i+1].style.display = "none"; 
     i++; 
    } 
    else { 
     i=0; 
    } 
    setTimeout(callbackSlider , 3000); 
} 

callbackSlider();

我的邏輯是，每一張照片我添加 - 只是把一類=「幻燈片」在img標籤

我的問題是，噹噹前圖像來這爲了得到一些不透明的效果添加或刪除我不知道如何改變fadeIn函數內的不透明度，因爲我只是通過它...任何想法？

來源

2016-02-15 Shago

你能在https://plnkr.co/或https://jsfiddle.net/上創建一個工作示例嗎？然後向我展示如何使用CSS3實現不透明度過渡效果。 JavaScript將只需要添加和刪除必要的類。 –

我通常做的是在CSS中創建一些類名的動畫，然後它JS，只需從元素的類列表中添加或刪除該特定的類。 – Dummy

https://plnkr.co/edit/LYsrHmPNO1UviIc76o9X?p=preview 和（如有必要）github： https://github.com/Ascaron70/Flick – Shago

我寫了一個演示來解決這個問題，但它可能運行得更好，使用CSS3「過渡」。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
     body{ 
      background-color: #f0f0f0; 
     } 
     .wrapper{ 
      width: 1000px; 
      margin: 0 auto; 
      padding: 100px 10px; 
      background-color: #fff; 
     } 
     .slide{ 
      opacity: 0; 
      display: none; 
      text-align: center; 
      line-height: 500px; 
      background-color: green; 
      color: #fff; 
     } 
     .slide:first-child{ 
      background-color: blue; 
      opacity: 1; 
      display: block; 
     } 
     .slide:last-child{ 
      background-color: red; 
     } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="slide">a</div> 
     <div class="slide">b</div> 
     <div class="slide">c</div> 
    </div> 
    <script> 
    window.onload = function(){ 
     var obj = document.getElementsByClassName('slide'); 
     slide(obj); 
    }; 
    function slide(obj){ 
     var slider = obj; 
     if (!slider) {return;} 
     var i = 0;  
     setInterval(function(){ 
      i += 1; 
      if (i >= slider.length) { 
       i = 0; 
       hide(slider[slider.length-1]); 
       show(slider[0]); 
      }else{ 
       hide(obj[i-1]);    
       show(obj[i]); 
      } 
     },3000); 
    } 
    function fadeIn(obj){ 
     var op = 0; 
     _anim(); 
     function _anim(){ 
      if(op < 1) { 
       op += 0.1; 
       op = Math.round(op * 10)/10; // this is because the op+=.1 gives me results .899999999... 
       obj.style.opacity = op; 
       } 
       setTimeout(arguments.callee , 50);//it seems better when the duration under 50; 
      } 
     } 

    function show(obj){ 
     if (typeof(obj) === "object") { 
      obj.style.display = "block"; 
      fadeIn(obj); 
     } 
    } 
    function hide(obj){ 
     if (typeof(obj) === "object") { 
      obj.style.display = "none"; 
     }  
    } 
    </script> 
</body> 
</html>

來源

2016-02-15 06:46:06 yzajoee

謝謝，這正是我想要的！ – Shago

傳遞一個不透明效果的圖像

回答

相關問題