左右箭头控制是如何控制自动轮播的，给点思路就好！

思路跟单击上/下一张按钮是一样的，都是由一个事件触发效果，只不过左右箭头控制是通过监测键盘按键事件触发的，一下片段希望对你有启示：

addEvent(document, 'keyup', function(e) {

    var currKey = 0,e = e || event

    currKey = e.keyCode || e.which || e.charCode

    if(currKey == 37){ // 左箭头

        fnPrev() // 上一页的实现代码

    } else if(currKey == 39){ // 右箭头

        fnNext() // 下一页

    }

})

// 注册事件监听

function addEvent(el, type, fn) {

    if(window.addEventListener) {

        el.addEventListener(type, fn, false)

    } else if(window.attachEvent) {

        el.attachEvent('on' + type, fn)

    }

}

工具/材料

Sublime Text

01

首先我们需要新建一个HTML5的文档，然后在文档中导入Bootstrap的样式文件，这个文件中包含了轮播图所有的样式定义，如下图所示

02

接下来我们需要导入脚本文件，注意先导入Jquery文件，然后导入bootstrap的脚本文件，顺序一定不能颠倒，如下图所示

03

然后在body标签里定义轮播图的容器，容器的大小需要和图片的大小一样，否则会出现轮播图错位，效果如下图所示

04

接下来我们就正式的添加轮播图了，这里先添加三张图，如下图所示，注意让哪种轮播图显示直接调用Bootstrap的active样式即可

05

轮播图片添加完毕以后，就可以添加轮播图焦点了。在Bootstrap中运用li列表定义轮播图焦点，注意焦点的数量和图片的数量要一样，如下图所示

06

轮播图中还有一个必不可少的元素就是左右箭头，通过Bootstrap的carousel-control样式添加轮播图箭头，如下图所示

07

最后我们运行程序以后，在页面中你就可以看到如下图所示的轮播图效果了。可以看到我们上面说的轮播图焦点和左右箭头都在页面上显示出来了，如下图所示

---