Question

我的自定义滑块出现问题：我想在点击下一个/后退按钮时停止setInterval事件，并在3秒后重新启动。

滑块：http://karanbhilware.com/mail_send/slider.html

区间代码如下。

HTML：

<div class="slider">
  <div id="sliderUL"> <img src="images/1.jpg" /> <img src="images/2.jpg" /> <img src="images/3.jpg" /> <img src="images/4.jpg" /> <img src="images/5.jpg" /> </div>
</div>
<div style="clear:both">&nbsp;</div>
<div id="sliderNav">
  <button id="back" data-file="previous" style="float:left; margin-left:50px;">previous</button>
  <button id="next" data-file="next" style="float:right; margin-right:50px;">Next</button>
</div>

JavaScript的：

var sliderWrap = $('#sliderUL'),
    img = $('#sliderUL img')
    singleWidth = sliderWrap.find('img:first-child').width(),
    imageLenght = img.length,
    idCount = 1,
    current = 1,
    firstImage = img.first();
    lastImage = img.last(),
    secondLast = imageLenght-1;
    secondImage = img.eq(1);
    firstImage.addClass('active');

img.each(function(){
    $(this).attr('id','slider_'+idCount++);
});

if(current === 1){
    $('#back').addClass('none');
}

$('#next').on('click',nextFun);
$('#back').on('click',backFun);
function backFun(){
    if(current === imageLenght){
        $('#next').removeClass('none');
    }
    if(current === 2){
        $(this).addClass('none');
    }

    var backNextSlider = sliderWrap.find('img[id="slider_'+(current-1)+'"]').addClass('active').removeClass('Subactive');
    sliderWrap.find('img[id="slider_'+(current)+'"]').removeClass('Subactive').addClass('backActive').removeClass('active');
    current--;
}       
function nextFun(){
    var currentNextSlider = sliderWrap.find('img[id="slider_'+(current+1)+'"]').addClass('active').removeClass('backActive');
    sliderWrap.find('img[id="slider_'+(current)+'"]').addClass('Subactive').removeClass('backActive, active');
    current++;
    if(current === 2){
        $('#back').removeClass('none');
    }
    if(current === imageLenght){
        $('#next').addClass('none');
    }
}       

var mode = 'Next';
function autRotatae(){
    if(current == imageLenght)
        mode = 'Back';
        if(current == 1)
            mode = 'Next';      
        if(mode == 'Next')
        {
            nextFun();
        }   
    else
        backFun();
}

$(document).ready(function(){
    setInterval(autRotatae,2000);   
})

Answer 1

你不能“暂停”一个间隔。您可以取消并重新启动它。

将间隔创建和暂停移动到单独的功能，因此您不要重复：

var rotateInt = null;

$(document).ready(function(){
  startRotate();
})

function startRotate() {
  if (! rotateInt)
    rotateInt = setInterval(autRotatae, 2000);   
}

function pauseRotate() {
  if (rotateInt)
  {
    clearInterval( rotateInt );
    rotateInt = null;

    setTimeout( startRotate, 3000 );
  }
}

然后，在你的下一个/上一个按钮处理程序中：

pauseRotate();

Answer 2

private static final int REQUEST_EXTERNAL_STORAGE = 1;
private static String[] PERMISSIONS_STORAGE = {
    Manifest.permission.READ_EXTERNAL_STORAGE,
    Manifest.permission.WRITE_EXTERNAL_STORAGE
};

public static void verifyStoragePermissions(Activity activity) {
// Check if we have write permission
int permission = ActivityCompat.checkSelfPermission(activity,       Manifest.permission.WRITE_EXTERNAL_STORAGE);

if (permission != PackageManager.PERMISSION_GRANTED) {
    // We don't have permission so prompt the user
    ActivityCompat.requestPermissions(
            activity,
            PERMISSIONS_STORAGE,
            REQUEST_EXTERNAL_STORAGE
    );
}

如何在单击时停止setInterval函数，并在几秒钟后重新启动

2 个答案: