1
  // html 部分
2
    <div id="container">
3
        <div id="list" style="left: -600px;">
4
            <img src="img/5.jpg" alt="5" />
5
            <img src="img/1.jpg" alt="1" />
6
            <img src="img/2.jpg" alt="2" />
7
            <img src="img/3.jpg" alt="3" />
8
            <img src="img/4.jpg" alt="4" />
9
            <img src="img/5.jpg" alt="5" />
10
            <img src="img/1.jpg" alt="1" />
11
        </div>
12
        <div id="pointsDiv">
13
            <span index="1" class="on"></span>
14
            <span index="2"></span>
15
            <span index="3"></span>
16
            <span index="4"></span>
17
            <span index="5"></span>
18
        </div>
19
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
20
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
21
    </div>
22

23
    // js 部分
24
    $(function () {
25

26
        var $container = $('#container')    //获取整个轮播图外部div
27
        var $list = $('#list')  //获取图片列表div
28
        var $points = $('#pointsDiv>span')  // 获取圆点sapn
29
        var $prev = $('#prev')  // 获取上一张按钮
30
        var $next = $('#next')  // 获取下一张按钮
31
        var PAGE_WIDTH = 600 //一页的宽度
32
        var TIME = 400 // 翻页的持续时间
33
        var ITEM_TIME = 20 // 单元移动的间隔时间
34
        var imgCount = $points.length   //img张数
35
        var index = 0 //当前下标
36
        var moving = false // 标识是否正在翻页(默认没有)
37

38

39
        // 1. 点击向右(左)的图标, 平滑切换到下(上)一页
40
        $next.click(function () {
41
            // 平滑翻到下一页
42
            nextPage(true)
43
        })
44
        $prev.click(function () {
45
            // 平滑翻到上一页
46
            nextPage(false)
47
        })
48

49
        // 3. 每隔3s自动滑动到下一页
50
        var intervalId = setInterval(function () {
51
            nextPage(true)
52
        }, 1000)
53

54
        // 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
55
        $container.hover(function () {
56
            // 清除定时器
57
            clearInterval(intervalId)
58
        }, function () {
59
            intervalId = setInterval(function () {
60
                nextPage(true)
61
            }, 1000)
62
        })
63

64
        // 6. 点击圆点图标切换到对应的页
65
        $points.click(function () {
66
            // 目标页的下标
67
            var targetIndex = $(this).index()
68
            // 只有当点击的不是当前页的圆点时才翻页
69
            if (targetIndex != index) {
70
                nextPage(targetIndex)
71
            }
72
        })
73

74
        /**
75
         * 平滑翻页
76
         * @param next
77
         * true: 下一页
78
         * false: 上一页
79
         * 数值: 指定下标页
80
         */
81
        function nextPage(next) {
82
            /*
83
              总的时间: TIME=400
84
              单元移动的间隔时间: ITEM_TIME = 20
85
              总的偏移量: offset
86
              单元移动的偏移量: itemOffset = offset/(TIME/ITEM_TIME)
87

88
              启动循环定时器不断更新$list的left, 到达目标处停止停止定时器
89
             */
90

91
            //如果正在翻页, 直接结束
92
            if (moving) { //已经正在翻页中
93
                return
94
            }
95
            moving = true // 标识正在翻页
96

97
            // 总的偏移量: offset
98
            var offset = 0
99
            // 计算offset
100
            if (typeof next === 'boolean') {
101
                offset = next ? -PAGE_WIDTH : PAGE_WIDTH
102
            } else {
103
                offset = -(next - index) * PAGE_WIDTH
104
            }
105

106
            // 计算单元移动的偏移量: itemOffset
107
            var itemOffset = offset / (TIME / ITEM_TIME)
108
            // 得到当前的left值
109
            var currLeft = $list.position().left
110
            // 计算出目标处的left值
111
            var targetLeft = currLeft + offset
112

113
            // 启动循环定时器不断更新$list的left, 到达目标处停止停止定时器
114
            var intervalId = setInterval(function () {
115
                // 计算出最新的currLeft
116
                currLeft += itemOffset
117
                if (currLeft === targetLeft) { // 到达目标位置
118
                    // 清除定时器
119
                    clearInterval(intervalId)
120
                    // 标识翻页停止
121
                    moving = false
122
                    // 如果到达了最右边的图片(1.jpg), 跳转到最左边的第2张图片(1.jpg)
123
                    if (currLeft === -(imgCount + 1) * PAGE_WIDTH) {
124
                        currLeft = -PAGE_WIDTH
125
                    } else if (currLeft === 0) {
126
                        // 如果到达了最左边的图片(5.jpg), 跳转到最右边的第2张图片(5.jpg)
127
                        currLeft = -imgCount * PAGE_WIDTH
128
                    }
129
                }
130
                // 设置left
131
                $list.css('left', currLeft)
132
                // console.log(currLeft)
133
            }, ITEM_TIME)
134

135
            // 更新圆点
136
            updatePoints(next)
137
        }
138

139
        /**
140
         * 更新圆点
141
         * @param next
142
         */
143
        function updatePoints(next) {
144
            // 计算出目标圆点的下标targetIndex
145
            var targetIndex = 0
146
            if (typeof next === 'boolean') {
147
                if (next) {
148
                    targetIndex = index + 1 // [0, imgCount-1]
149
                    if (targetIndex === imgCount) { // 此时看到的是1.jpg-->第1个圆点
150
                        targetIndex = 0
151
                    }
152
                } else {
153
                    targetIndex = index - 1
154
                    if (targetIndex === -1) { // 此时看到的是5.jpg-->第5个圆点
155
                        targetIndex = imgCount - 1
156
                    }
157
                }
158
            } else {
159
                targetIndex = next
160
            }
161

162

163
            // 将当前index的<span>的class移除
164
            // $points.eq(index).removeClass('on')
165
            $points[index].className = ''
166
            // 给目标圆点添加class='on'
167
            // $points.eq(targetIndex).addClass('on')
168
            $points[targetIndex].className = 'on'
169

170
            // 将index更新为targetIndex
171
            index = targetIndex
172
        }
173
    })