0

我试图每隔一段时间在 div 之间切换，但也能够停止它，以便包括使用屏幕上的箭头按钮打开命令的能力。（就像带有箭头的 div 幻灯片一样可以立即切换。）

因此，我不能使用 .delay()，因为它无法停止，所以我尝试使用 .setTimeout，但我失败得很惨。有人可以告诉我我做错了什么吗？

var divs = $('div[id^="Frame"]').hide(),
i = 0;

(function cycle() { 
divs.eq(i).fadeIn(1000)
         .setTimeout(function(){divs.eq(i).fadeOut(1000, cycle);},2000);        


i = ++i % divs.length; // increment i, 
                       //   and reset to 0 when it equals divs.length
})();
4

3 回答 3

0

现场演示

JS：

var H = $('#FrameHolder'),
    D = $('#Frame > div'),
    B = $('#Button'),
    n = D.length,
    f = 400, // fade time
    p = 2500,// pause
    c = 0,   // counter
    i;       // interval

function loop(){
  i = setInterval(function(){B.click();},p);
}loop();

H.hover(function(e){
  var mEnt = e.type.match('t');
  B.stop().fadeTo(f,!!mEnt);
  return mEnt?clearInterval(i):loop();
});
B.click(function(){
  D.stop().fadeOut(f).eq(++c%n).fadeIn(f);
});

HTML：

<div id="FrameHolder">  
  <div id="Frame">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div id="Button"></div>
</div>

CSS：

#FrameHolder{
  position:relative;
  margin:0 auto;
  width:400px;
  height:300px;
  overflow:hidden;
}
#frame{

}
#Frame > div{
  position:absolute;
  top:0;
  text-align:center;
  line-height:276px;
  width:400px;height:300px;
}
#Frame > div + div{
  display:none; /* hide all but 1st */
}

#Button{
  cursor:pointer;
  position:absolute;
  width:60px;
  height:60px;
  background:rgba(0,0,0,0.5);
  border-radius:50%;
  right:20px;
  top:50%;
  margin-top:-30px;
  display:none;
}
于 2013-11-13T20:19:47.977 回答
0

我不确定你想要实现什么，但这里有一些代码可以淡入/淡出 div，你有机会停止这个过程：

var divs = $('div[id^="Frame"]').hide(), 
    i = 0,
    currentDiv = null,
    interval = null;

var stopFading = function() {
    clearTimeout(interval);
}
var showDiv = function() {
    if(currentDiv) {
        currentDiv.fadeOut(1000, function() {
            currentDiv = null;
            showDiv();
        });
    } else {
        currentDiv = divs.eq(i);
        currentDiv.fadeIn(1000, function() {
            interval = setTimeout(showDiv, 2000);
        });
        i += 1;
        if(i > divs.length) i = 0;
    }
}
showDiv();
于 2013-11-13T19:58:52.000 回答
0

还没有查看您的其余代码是否正常工作，但直接错误是setTimeout不可链接。所以代码应该是这样的......

编辑——应该工作

另一个问题是i需要在 else 中完成的增量将在函数运行之前增加setTimeouti

http://jsfiddle.net/RJe86/1/

var divs = $('div[id^="Frame"]').hide(),
i = 0;

(function cycle() { 
    divs.eq(i).fadeIn(1000,function(){
        setTimeout(function(){
           divs.eq(i).fadeOut(1000, cycle);
           i = ++i % divs.length; // increment i, 
                       //   and reset to 0 when it equals divs.length
        },2000); 
    });       
})();
于 2013-11-13T20:00:58.313 回答