传递图像以获得不透明度效果

passing an image for an opacity effect

本文关键字：不透明度 图像      更新时间：2023-09-26

我有这段代码，它将每 3 秒(滑块(更改一次图片，我想添加淡入淡出效果，但我似乎做不到。

我看到的大多数tuts都使用像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 标签中放置一个 class="slide">

我的问题是，当当前图像轮到添加或删除一些不透明度效果时，我不知道如何更改fadeIn函数内的不透明度，因为我只是传递它。有什么想法吗？

我写了一个演示来解决这个问题，但使用 CSS3"transition"可能会运行得更好。

<!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>
相关文章：