2：获取节点；
3：给向下切换写一个点击事件，点击图片切换到下一张，注意当图片切换到最后一张的时候会报错，所以必须要判断一下，当图片切换到最后一张的时候在，再次击会切换到第一张；
4：给向上切换写一个点击事件，注意当图片切换到第一张之后会报错，所以必须要判断一下，当图片切换到第一的时候，再次点击会切换到最后张，循环起来；
5：写一个定时器，定时器的播放顺序和向下切换一致，可以封装一个函数方便调用；
6：写鼠标划入事件，清除定时器；
7：写鼠标移出事件，定时器继续运行；
8：图片导航的点击事件
点击事件click
定时器setlnterval（）
if判断
for（）循环
工具/材料Sublime Text
01首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示
02然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头
03接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明
04最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能
05最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>query焦点轮播图</title>
<style type="text/css">
*{ margin: 0padding: 0text-decoration: none}
body { padding: 20px}
#container { width: 600pxheight: 400pxborder: 3px solid #333overflow: hiddenposition: relative}
#list { width: 4200pxheight: 400pxposition: absolutez-index: 1}
#list img { float: left}
#buttons { position: absoluteheight: 10pxwidth: 100pxz-index: 2bottom: 20pxleft: 250px}
#buttons span { cursor: pointerfloat: leftborder: 1px solid #fffwidth: 10pxheight: 10pxborder-radius: 50%background: #333margin-right: 5px}
#buttons .on { background: orangered}
.arrow { cursor: pointerdisplay: noneline-height: 39pxtext-align: centerfont-size: 36pxfont-weight: boldwidth: 40pxheight: 40px position: absolutez-index: 2top: 180pxbackground-color: RGBA(0,0,0,.3)color: #fff}
.arrow:hover { background-color: RGBA(0,0,0,.7)}
#container:hover .arrow { display: block}
#prev { left: 20px}
#next { right: 20px}
</style>
<script type="text/javascript" src="js/jquery.1.10.2.js"></script>
<script type="text/javascript">
$(function () {
var container = $('#container')
var list = $('#list')
var buttons = $('#buttons span')
var prev = $('#prev')
var next = $('#next')
var index = 1
var len = 5
var interval = 3000
var timer
function animate (offset) {
var left = parseInt(list.css('left')) + offset
if (offset>0) {
offset = '+=' + offset
}
else {
offset = '-=' + Math.abs(offset)
}
list.animate({'left': offset}, 300, function () {
if(left >-200){
list.css('left', -600 * len)
}
if(left <(-600 * len)) {
list.css('left', -600)
}
})
}
function showButton() {
buttons.eq(index-1).addClass('on').siblings().removeClass('on')
}
function play() {
timer = setTimeout(function () {
next.trigger('click')
play()
}, interval)
}
function stop() {
clearTimeout(timer)
}
next.bind('click', function () {
if (list.is(':animated')) {
return
}
if (index == 5) {
index = 1
}
else {
index += 1
}
animate(-600)
showButton()
})
prev.bind('click', function () {
if (list.is(':animated')) {
return
}
if (index == 1) {
index = 5
}
else {
index -= 1
}
animate(600)
showButton()
})
buttons.each(function () {
$(this).bind('click', function () {
if (list.is(':animated') || $(this).attr('class')=='on') {
return
}
var myIndex = parseInt($(this).attr('index'))
var offset = -600 * (myIndex - index)
animate(offset)
index = myIndex
showButton()
})
})
container.hover(stop, play)//鼠标移入停止轮播
play()
})
</script>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px">
<img src="img/5.jpg" alt="1"/>
<img src="img/1.jpg" alt="1"/>
<img src="img/2.jpg" alt="2"/>
<img src="img/3.jpg" alt="3"/>
<img src="img/4.jpg" alt="4"/>
<img src="img/5.jpg" alt="5"/>
<img src="img/1.jpg" alt="5"/>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:" id="prev" class="arrow"><</a>
<a href="javascript:" id="next" class="arrow">></a>
</div>
</body>
</html>
可以直接复制用，记得引入JQ库！
