如何添加淡入淡出效果答案

【问题标题】：How can I add fade in, fade out effects如何添加淡入淡出效果
【发布时间】：2016-05-09 09:20:45
【问题描述】：

我有一个简单的脚本，它可以作为一个简单的 html 库。但是，我需要在我的画廊中添加一些过渡效果，比如淡入、淡出，或者类似于每部电影结尾处的字幕的效果（你知道我的意思）。

我该如何解决这个问题？我想只使用 JS、HTML、CSS 来制作它，而不需要外部插件。可能吗？现在，我只有下面这样的东西：

<head>
<title>Test</title>
    <script>
var images = [      "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
            "https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
            "https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
                "https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
         ];

var links = [       "http://www.example1.com",
            "http://www.example2.com",
            "http://www.example3.com",
            "http://www.example4.com", 
                "http://www.example5.com", 
            "http://www.example6.com",
         ];
var i = 0;
var renew = setInterval(function(){
        if(i==images.length) i=0;
        document.getElementById("img1").src = images[i]; 
    document.getElementById("link1").href = links[i]; 

        if(i+1==images.length) i=-1;
        document.getElementById("img2").src = images[i+1];
    document.getElementById("link2").href = links[i+1];

        if(i+2==images.length) i=-2;
        document.getElementById("img3").src = images[i+2];
    document.getElementById("link3").href = links[i+2];

        i+=3;


},5000);
</script>

</head>

<body>

<div align="center">
<a href="http://www.example1.com" id="link1"><img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' > </a> </br></br>
<a href="http://www.example2.com" id="link2"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' > </a> </br></br>
<a href="http://www.example3.com" id="link3"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3' > </a> </br>
</div> 

</body>

【问题讨论】：

css3.bradshawenterprises.com/cfimg 请查看

标签： javascript html css image image-gallery

【解决方案1】：

我刚刚创建了一个 JQuery 函数并将其添加到您的脚本中。现在，当您单击该按钮时，它将按照说明进行操作。它只是作为一个例子如何做到这一点

<html>
<head>
<title>Test</title>
    <script>

var images = [      "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
            "https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
            "https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
                "https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
         ];

var links = [       "http://www.example1.com",
            "http://www.example2.com",
            "http://www.example3.com",
            "http://www.example4.com", 
                "http://www.example5.com", 
            "http://www.example6.com",
         ];
var i = 0;
var renew = setInterval(function(){
        if(i==images.length) i=0;
        document.getElementById("img1").src = images[i]; 
    document.getElementById("link1").href = links[i]; 

        if(i+1==images.length) i=-1;
        document.getElementById("img2").src = images[i+1];
    document.getElementById("link2").href = links[i+1];

        if(i+2==images.length) i=-2;
        document.getElementById("img3").src = images[i+2];
    document.getElementById("link3").href = links[i+2];

        i+=3;


},5000);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type='text/javascript'>

$(document).ready(function(){
    $(".btn1").click(function(){
        $("#link1").fadeOut()
    });
    $(".btn2").click(function(){
        $("#link1").fadeIn();
    });
});
</script>
</head>
<body>

</script>
</head>

<body>

<div align="center">
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
<a href="http://www.example1.com" id="link1"><img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' > </a> </br></br>
<a href="http://www.example2.com" id="link2"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' > </a> </br></br>
<a href="http://www.example3.com" id="link3"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3' > </a> </br>
</div> 

</body>


</html>

【讨论】：

我认为 jQuery 对于这个任务来说太过分了
@yak 可以完成，但您必须指定任何应该完成的事件

【解决方案2】：

你绝对可以用 CSS 实现一些效果。但不是所有的（就像jQuery-ui的盲人）

大多数效果都由变化组成：
- opacity: [0-1]
- display: relative; left: [X]px; top: [Y]px 或 transform: translate([X]px,[Y]px)
- overflow: hidden
- 和动画：

任一 CSS：

#img {
  animation: fade-in 2s infinite;
} 

@keyframe fade-in { 
  from {
    left: -200px
  }
  to {
    left: 0 
  }
}`

或 JavaScript：

var img = document.getElementById('img');
for(i = 1; i <= 100; i++){
  (function(step) {
    setTimeout(function() {
      img.style.transform = "translate(-"+(200-step*2)+"px, 0)";
    }, step * 20);
  })(i);
}

要实现类似于盲人的效果，您必须将图像容器
向左移动，同时以相同的速度向右移动图像。
- 这是一个简化的 blind 效果示例 https://jsfiddle.net/warkentien2/Lh10phuv/5/
这里我实现了 8 个纯 JavaScript 效果（包括盲，带说明）
- 淡入 http://codepen.io/warkentien2/pen/pboVXR
- 淡出 http://codepen.io/warkentien2/pen/EyxpVq

【讨论】：

【解决方案3】：

你可以试试这个。我根本没有更改您的代码。

HTML

<div align="center"> 
 <a href="http://www.example1.com" id="link1">
  <img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' > 
 </a> 
</br>
</br>
<a href="http://www.example2.com" id="link2">
   <img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' > 
</a>
<br>
<br>
  <a href="http://www.example3.com" id="link3">
 <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3'>

 </a>
  <br>
  </div>

CSS

  <style>
     .animate{transition:all 1s ease; opacity:0;}
  </style>

  <script>
      var images = [          "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
        "https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
        "https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
        "https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
        "https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
     ];

  var links = [       "http://www.example1.com",
              "http://www.example2.com",
             "http://www.example3.com",
              "http://www.example4.com", 
               "http://www.example5.com", 
               "http://www.example6.com",
             ];
     var i = 0;
    var renew = setInterval(function(){
      if(i==images.length) i=0;
    document.getElementById("img1").src = images[i]; 
        document.getElementById("link1").href = links[i];
            document.getElementById('link1').style.opacity = 0; 
            setTimeout(function(){
                document.getElementById('link1').setAttribute("class", "animate");
                document.getElementsByClassName('animate')[0].style.opacity = 1;
                setTimeout(function(){document.getElementById('link1').removeAttribute("class", "animate")},500)
            },500)


    if(i+1==images.length) i=-1;
    document.getElementById("img2").src = images[i+1];
        document.getElementById("link2").href = links[i+1];
            document.getElementById('link2').style.opacity = 0; 
            setTimeout(function(){
                document.getElementById('link2').setAttribute("class", "animate");
                document.getElementsByClassName('animate')[1].style.opacity = 1;
                setTimeout(function(){document.getElementById('link2').removeAttribute("class", "animate")},500)
            },500)

    if(i+2==images.length) i=-2;
    document.getElementById("img3").src = images[i+2];
        document.getElementById("link3").href = links[i+2];
            document.getElementById('link3').style.opacity = 0;
            setTimeout(function(){
                document.getElementById('link3').setAttribute("class", "animate");
                document.getElementsByClassName('animate')[2].style.opacity = 1;
                setTimeout(function(){document.getElementById('link3').removeAttribute("class", "animate")},500)
            },500)

    i+=3;



     },5000);
 </script>

在此处查看实时示例 - https://jsfiddle.net/Rit_Design/9mkvffnk/1/

记住代码可以更智能。

【讨论】：