Question

我试图以一定间隔在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
})();

Answer 1

我不确定你想要实现的目标，但是这里有一些代码可以淡化/淡出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();

Answer 2

尚未查看代码的其余部分是否正常工作，但直接错误是setTimeout不可链接。所以代码应该是这样的......

编辑 - 应该工作

另一个问题是i的增量需要在setTimeout中完成，否则i会在函数运行之前递增

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); 
    });       
})();

Answer 3

<强> LIVE DEMO

<强> 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;
}

setInterval和Div之间的切换

3 个答案: