<!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库！
stop停止动画队列具体参数查下jquery手册,removeClass移除某个class属性的值eq是查找$("#focus .btn span")的索引是index的元素让他停止动画队列再给他加上class为on的值
具体的意思就是先停止所有$("#focus .btn span")的动画让他们的class全部不为on
再让$("#focus .btn span")
的索引等于index的元素加上class为on的值
