Question

我有这个代码会每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();

我的逻辑是我添加的每张图片 - 只是放了一个类=＆＃34;幻灯片＆＃34;在img标签

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

Answer 1

我编写了一个演示来解决这个问题，但使用CSS3＆＃34;过渡＆＃34;可能会更好。

<!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>

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

1 个答案: