Javascript 需要一种方法使我的滑块图像在单击“上一步”或“下一步”时具有淡出效果吗_Javascript_Jquery_Html_Css_Slidetoggle

Javascript 需要一种方法使我的滑块图像在单击“上一步”或“下一步”时具有淡出效果吗

javascript jquery html css

Javascript 需要一种方法使我的滑块图像在单击“上一步”或“下一步”时具有淡出效果吗,javascript,jquery,html,css,slidetoggle,Javascript,Jquery,Html,Css,Slidetoggle,我需要一种方法（最好是js）使我的滑块图像在单击“上一步”或“下一步”按钮时具有淡出效果我希望在单击“上一页”时滑块中的图像淡出，以便下一张图像可以显示…当我单击“下一页”时，图像慢慢消失，下一张幻灯片图像出现 <ul class="slider"> <li><img src="images/1.png" alt="img" width="979" height="470"></li> <

我需要一种方法（最好是js）使我的滑块图像在单击“上一步”或“下一步”按钮时具有淡出效果

我希望在单击“上一页”时滑块中的图像淡出，以便下一张图像可以显示…当我单击“下一页”时，图像慢慢消失，下一张幻灯片图像出现

<ul class="slider">
             <li><img src="images/1.png" alt="img" width="979" height="470"></li>
             <li><img src="images/2.png" alt="img" width="979" height="470"></li>
             <li><img src="images/3.png" alt="img" width="979" height="470"></li>

</ul>

请帮助…

将此javascript函数用作一种出色的淡入淡出效果：

function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}

功能衰减（元素）{
var op=1；//初始不透明度
变量计时器=设置间隔（函数（）{
if（op=images.length）{
计数器=0；
}
setTimeout（函数（）{
fadein（图像[计数器]）；
}, 1300);
setTimeout（函数（）{
状态=0；
}, 2500);
}
}
div.imgcontainer{
高度：100px；
宽度：200px；
背景色：#CCC；
填充：50px 0px；
}
div.img容器img{
背景色：#FFF；
宽度：100px；
高度：100px；
}

祝你好运！

听起来你在寻找一个叫Malsup的家伙创建的非常易于使用的插件。请查看：

您可以为幻灯片设置各种效果，包括淡入淡出

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

    <script type="text/javascript">
function fadeout(element) {
    var op = 1; // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1) {
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
    }

    function fadein(element) {
    var op = 0.1; // initial opacity
    var intimer = setInterval(function () {
        if (op >= 1) {
            clearInterval(intimer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        if (op == 0.1) {
            element.style.display = 'block';
        }
        op += op * 0.1;
    }, 50);
    }
    var images = [];
    var counter = 0;
    var state = 0;

    function initimages() {
    images[0] = document.getElementById("img1");
    images[1] = document.getElementById("img2");
    images[2] = document.getElementById("img3");
    for (i = 1; i < images.length; i++) {
        images[i].style.display = 'none';
    }
    }

    function previous() {
    if (state == 0) {
        state = 1;
        fadeout(images[counter]);
        counter -= 1;
        if (counter < 0) {
            counter = images.length - 1;
        }
        setTimeout(function () {
            fadein(images[counter]);
        }, 1300);
        setTimeout(function () {
            state = 0;
        }, 2500);
    }
    }

    function next() {
    if (state == 0) {
        state = 1;
        fadeout(images[counter]);
        counter += 1;
        if (counter >= images.length) {
            counter = 0;
        }
        setTimeout(function () {
            fadein(images[counter]);
        }, 1300);
        setTimeout(function () {
            state = 0;
        }, 2500);
    }
    }
    </script>
    <style type="text/css">
div.imgcontainer {
    height:100px;
    width:200px;
    background-color:#CCC;
    padding:50px 0px;
    }
    div.imgcontainer img {
    background-color:#FFF;
    width: 100px;
    height:100px;
    }
    </style>

    <title></title>
</head>

<body onload="initimages();">
    <div class="imgcontainer">
        <center>
            <img alt="1" id="img1" name="img1" src="">
            <img alt="2" id="img2" name="img2" src="">
            <img alt="3" id="img3" name="img3" src="">
        </center>
    </div>
        <input onclick="previous();" type="button" value="Previous">
        <input onclick="next();" type="button" value="Next">
</body>
</html>