如何通过键盘按键停止jQuery自动轮播滑块？

没问题，这个需求很好实现！核心思路就是把自动轮播的定时器引用保存下来，然后监听键盘按键事件，触发时清除定时器就能停止自动轮播了。

修改后的完整代码： #

JavaScript 部分

jQuery(document).ready(function ($) {
    // 保存定时器引用，方便后续清除
    var autoSlideInterval = setInterval(function () {
        moveRight();
    }, 3000);

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({ left: + slideWidth }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({ left: - slideWidth }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

    // 监听键盘任意按键，按下时停止自动轮播
    $(document).on('keydown', function() {
        clearInterval(autoSlideInterval);
        console.log('自动轮播已停止');
    });
});

CSS 部分

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600); 
html { 
    border-top: 5px solid #fff; 
    background: #58DDAF; 
    color: #2a2a2a; 
} 
html, body { 
    margin: 0; 
    padding: 0; 
    font-family: 'Open Sans'; 
} 
h1 { 
    color: #fff; 
    text-align: center; 
    font-weight: 300; 
} 
#slider { 
    position: relative; 
    overflow: hidden; 
    margin: 20px auto 0 auto; 
    border-radius: 4px; 
} 
#slider ul { 
    position: relative; 
    margin: 0; 
    padding: 0; 
    height: 200px; 
    list-style: none; 
} 
#slider ul li { 
    position: relative; 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 500px; 
    height: 300px; 
    background: #ccc; 
    text-align: center; 
    line-height: 300px; 
} 
a.control_prev, a.control_next { 
    position: absolute; 
    top: 40%; 
    z-index: 999; 
    display: block; 
    padding: 4% 3%; 
    width: auto; 
    height: auto; 
    background: #2a2a2a; 
    color: #fff; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 18px; 
    opacity: 0.8; 
    cursor: pointer; 
} 
a.control_prev:hover, a.control_next:hover { 
    opacity: 1; 
    -webkit-transition: all 0.2s ease; 
} 
a.control_prev { 
    border-radius: 0 2px 2px 0; 
} 
a.control_next { 
    right: 0; 
    border-radius: 2px 0 0 2px; 
} 
.slider_option { 
    position: relative; 
    margin: 10px auto; 
    width: 160px; 
    font-size: 18px; 
}

HTML 部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h1>Incredibly Basic Slider</h1> 
<div id="slider"> 
    <a href="#" class="control_next">>></a> 
    <a href="#" class="control_prev"><<</a> 
    <ul> 
        <li>SLIDE 1</li> 
        <li style="background: #aaa;">SLIDE 2</li> 
        <li>SLIDE 3</li> 
        <li style="background: #aaa;">SLIDE 4</li> 
    </ul> 
</div>

关键修改点说明： #

• 把原来的setInterval赋值给变量autoSlideInterval，这样我们就能拿到这个定时器的唯一引用，方便后续操作。
• 添加了$(document).on('keydown', ...)事件监听，当用户按下任意键盘按键时，调用clearInterval(autoSlideInterval)清除定时器，自动轮播就会立刻停止。
• 如果之后需要恢复自动轮播，可以重新调用setInterval并更新autoSlideInterval变量，不过你的需求是停止，这部分就按需添加啦。

内容的提问来源于stack exchange，提问作者lStoilov