1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="box">
    <ul class="advs">
        <li><a href="#"></a><img src="http://www.jq22.com/img/cs/500x300-1.png" alt=""></li>
        <li><a href="#"></a><img src="http://www.jq22.com/img/cs/500x300-2.png" alt=""></li>
        <li><a href="#"></a><img src="http://www.jq22.com/img/cs/500x300-3.png" alt=""></li>
        <li><a href="#"></a><img src="http://www.jq22.com/img/cs/500x300-4.png" alt=""></li>
        <li><a href="#"></a><img src="http://www.jq22.com/img/cs/500x300-5.png" alt=""></li>
    </ul>
    <ul class="icons">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var timer = null; //声明一个定时器变量
var curr = 0; //当前显示的那张图片的下标
var $advs = null; //得到所有的图片
var $icons = null; //得到所有的图标
var $box = null; //得到容器对象
var $box_width = 0; //容器的宽度
$(function() {
    $advs = $(".advs>li");
    $icons = $(".icons>li");
    $box = $("#box");
    $box_width = $box.width(); //获取div的宽度
    sp_adv_show(curr); //显示第一张图,人为的告知函数去显示哪张图片
    start(); //启动定时器
    $icons.mouseover(function() {
        // stop();//停止定时器
        sp_adv_show($icons.index(this));
    });
    $box.mouseover(function() {
        stop();
    }).mouseout(function() {
        start();
    })
});
// 启动定时器
function start() {
    if (timer == null) {
        timer = window.setInterval(sp_adv_show, 2000);
    }
}
//停止定时器的方法
function stop() {
    if (timer != null) {
        window.clearInterval(timer);
        timer = null;
    }
}
//切换图片的函数
function sp_adv_show() {
    //自动走
    if (arguments.length == 0) {
        curr++;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX