Javascript 使用动态范围输入速度和重复进行淡入淡出_Javascript_Jquery_Html

Javascript 使用动态范围输入速度和重复进行淡入淡出

javascript jquery html

Javascript 使用动态范围输入速度和重复进行淡入淡出,javascript,jquery,html,Javascript,Jquery,Html,我试图控制速度和重复我的淡入淡出div使用范围按钮，但我不知道如何做到这一点。请帮助我，如果你有任何想法。这是我的代码 <script> $(document).ready(function(){ var faderIndex = 0, faders = $('.fadey'); function nextFade() { $(faders[faderIndex]).fadeOut(2000, function() {

我试图控制速度和重复我的淡入淡出div使用范围按钮，但我不知道如何做到这一点。请帮助我，如果你有任何想法。这是我的代码

<script>
$(document).ready(function(){
    var faderIndex = 0,
    faders = $('.fadey');
    function nextFade() {
        $(faders[faderIndex]).fadeOut(2000, function() {
            faderIndex++;
            if (faderIndex >= faders.length)
                faderIndex = 0;
            $(faders[faderIndex]).fadeIn(3000, nextFade);
        });
    }
    nextFade();
});
</script>
<body id="d1" style="text-align:center" >
    <div class="fadey"></div>
</body>


$（文档）.ready（函数（）{
var faderIndex=0，
音量控制器=$（'.fadey'）；
函数nextFade（）{
$（音量控制器[faderIndex]）.fadeOut（2000，函数（）{
faderIndex++；
如果（音量控制器索引>=音量控制器长度）
faderIndex=0；
$（音量控制器[faderIndex]）.fadeIn（3000，nextFade）；
});
}
nextFade（）；
});

不太清楚，但您希望div将淡出索引

比如：

脚本

$(document).ready(function(){
    var faderIndex = 1,
    faders = $('.fadey');
    function nextFade(faderIndex) {
        $(faders).eq(faderIndex).fadeOut(2000, function() {
            faderIndex++;
            if (faderIndex >= faders.length)
                faderIndex = 0;
            $(faders).eq(faderIndex).fadeIn(3000, nextFade);
        });
    }
    nextFade(faderIndex);
});

HTML

<div class="fadey">fadey 1</div>
<div class="fadey">fadey dfdsfd sdsf sdfds f</div>

法迪1 fadey dfdsfd sdsf sdfds f 这里是现场演示

按钮方法（）

首先，我们将在HTML中制作一些按钮

<button id="fast">Fast</button>
<button id="normal">Normal</button>
<button id="slow">Slow</button>
<div id="fadey1" class="fadey"></div>
<div id="fadey2" class="fadey"></div>

HTML5范围输入法（）

首先，我们将使用默认值和范围限制在HTML中输入范围

<input id="range" type="range" value="2000" min="200" max="4000" step="200" />
<div id="fadey1" class="fadey"></div>
<div id="fadey2" class="fadey"></div>

@user1537158对于这段代码，我正在尝试使用范围输入给出淡入速度Hank you@Ruben infante是的，您的代码工作得很好，我正在尝试使用范围按钮进行淡入速度。@user2024102您是指HTML5元素

？@user2024102我使用范围输入用第二种方法更新了我的答案。Infanate哇。。你真的很酷。我可以使用user添加重复单个div N次吗input@user2024102看看你是否可以使用我目前提供的，并尝试一些东西，看看你能走多远。如果你仍然有困难，你可能想提出一个新的问题，试着具体说明你尝试了什么，以及你想要达到什么样的结果。

<input id="range" type="range" value="2000" min="200" max="4000" step="200" />
<div id="fadey1" class="fadey"></div>
<div id="fadey2" class="fadey"></div>

$(document).ready(function () {
    var faderIndex = 0,
        faderSpeed = getRangeValue(),
        faders = $('.fadey');

    $('input#range').change(function () {
        faderSpeed = getRangeValue();
    });

    function getRangeValue() {
        return parseInt($('input#range').val(), 10);
    }

    function nextFade() {
        $(faders[faderIndex]).fadeOut(faderSpeed, function () {
            faderIndex++;
            if (faderIndex >= faders.length) faderIndex = 0;
            $(faders[faderIndex]).fadeIn(faderSpeed, nextFade);
        });
    }
    nextFade();
});