通过元素循环当一个和下一个环节

我试图建立一个简单的自定义滑块，用下面的jQuery通过元素循环当一个和下一个环节

var divs = $('div[class^="slide-holder-"]').hide(), 
    i = 0, 
    $slide = $("#banner > div"); 

(function cycle() { 
    divs.eq(i).fadeIn(400) 
       .delay(2000) 
       .fadeOut(400, cycle); 


i = ++i % divs.length; 
})();

与下面的HTML

<div id="banner"> 
    <div class="slide-holder-1"> 
     <div class="slide-1"> some content </div> 
    </div> 
    <div class="slide-holder-2"> 
     <div class="slide-2"> some content </div> 
    </div> 
</div>

我期待添加上一个和下一个链接直接返回/前进，但没有任何运气，我会很感激任何帮助！

干杯

来源

2013-02-06 jmWeb

我们应该从“直”中理解什么？如果从最后一句中删去这个词，意思是否会改变？ –

你的函数定义在那里看起来不完整 –

这是不是很优雅，但增加的div切换向前或向后的HTML：

<div id="banner"> 
    <div id="backward" style="float:left">&lt;</div> 
    <div id="forward" style="float:right">&gt;</div> 
    <div class="slide-holder-1"> 
     <div class="slide-1"> some content 1 </div> 
    </div> 
    <div class="slide-holder-2"> 
     <div class="slide-2"> some content 2 </div> 
    </div> 
    <div class="slide-holder-3"> 
     <div class="slide-3"> some content 3 </div> 
    </div> 
</div>

，然后停止动画，如果有必要改变i并重新启动cycle作品为了我。

$(function() { 

    var divs = $('div[class^="slide-holder-"]').hide(), 
     i = 0, 
     $slide = $("#banner > div"); 

    function cycle() { 
     divs.eq(i).fadeIn(400) 
      .delay(2000) 
      .fadeOut(400, cycle); 
     i = ++i % divs.length; 
    } 

    $('#forward').click(function() { 
     divs.stop(true).hide(); 
     cycle(); 
    }); 

    $('#backward').click(function() { 
     divs.stop(true).hide(); 
     i = (i-2+divs.length) % divs.length; 
     cycle(); 
    }); 

    cycle(); 

});

我需要使cycle成为一个“可见”功能才能正常工作。无法快速浏览项目，因为fadeIn需要显示当前元素，才能进入下一个页面，但也许它至少是一个起点。

来源

2013-02-07 01:17:28

通过元素循环当一个和下一个环节

回答

相关问题