<!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库！
你好！这段代码是轮播图的自动切换。其中还设置了鼠标移入移出的效果。setInteval函数是个定时器，两个参数:一个是执行的函数，一个是时间间隔。就是根据给定的的时间间隔(单位是毫秒)执行函数。setInterval(autoChange,3000)就是每3秒执行一次autoChange这个函数。说下autoChange函数:有一个current_index变量，用来记录当前显示的轮播图是第几个。每次执行的时候，都会先给这个变量进行自增1个。通过循环判断所有轮播图中的元素，如果索引与变量的值相同，分别设置对应元素的样式，否则设置为另一种样式。再看hotChange函数:定义了一个timer变量，也就是上面说的定时器。找出id为button的元素，并找出它下面的li子元素。用了一个for循环来遍历这个子元素数组。在循环里面做了两件事:为子元素设置onmouseover事件和onmouseout事件。其中onmouseout事件里面就是为timer重新赋值。而onmouseover事件，则是先判断timer变量是否有值。有值的话，使用clearInterval清空，也就是停止定时器；无值的话，则通过循环，为其设置样式。无值这里的循环内逻辑与autoChange函数是相同的。希望对你有帮助！
