本文介绍了如何使用原生JavaScript实现一个焦点轮播图，包括DOM操作、事件运用、定时器和无限滚动技巧。通过创建HTML结构、CSS样式以及JavaScript代码，实现了图片在鼠标移入和移出时的自动切换，以及点击按钮和底部圆点的切换效果，同时包含了动画过渡。文章适合初级开发者学习，以加深对JavaScript的理解。
轮播图是在大家学习 JavaScript 时常写的小项目，网络上相关的资源也很多。我在学习的过程中，将写轮播图的经历做一些简单的总结，希望大家在看后能有所收获，如果有不对的地方，请大家在留言区指出。
前言
轮播图是什么
Q:轮播图是什么？ A:简单解释：所谓的轮播图，就是几张图片轮流显示。
我们先随便找个网站访问一下，例如 淘宝网 首页中间这一块。
中间的滚动区域就是轮播图。
哪些知识点
通过轮播图，我们可以巩固(学到)什么知识点呢？
DOM 操作 HTML
事件运用
定时器
无限滚动技巧
JavaScript 动画
函数递归
注意
个人建议：作为新手的我们，不管要做多么高大上的特效，都先完成静态页面，再去添加动态的处理！！！切记切记！
原理
实现效果
轮播图的实现效果：即在一个窗口，鼠标移入后左右箭头会出现，可以点击动画切换图片，同时下面的小圆点会跟随切换（点击小圆点可以实现同样的功能），可以在此基础上循环播放。
总结：轮播图片具备以下特点：
点击左右两边的箭头切换图片
当鼠标移出图片范围，自动间隔时间切换；当鼠标移入图片范围，停止自动切换
切换到某一张图片时，底部的圆点样式也跟着改变
点击底部圆点也会切换到相应位置的图片
基本布局
我们首先要明白轮播图的实现原理和基本布局：
将一系列大小相等的图片平铺，利用 CSS 布局只显示一张图片，其余隐藏。通过 JS 代码修改图片的偏移量实现切换，按钮绑定切换事件，或者定时器实现自动播放。
初始基本结构如下：
最外层需要有一个容器包裹着（通常是 div，类型定义为 container）
容器设置宽高，以及 overflow 为 hidden，超出宽高部分隐藏，
容器里面包含着两个容器：imgList 和 btnList 以及两个 a 标签（左右按钮）
imgList 中包裹着所有的图片，宽为所有图片的总宽度，position 为 absolute（通过改变 left 来实现图片轮播的效果）
btnList 中包裹着轮播图下部的指示圆点，position 也为 absolute
样式可以自己按照自己想要的修改，在此我们主要将关键部分。并且完成代码。
为节省页面空间，之后代码均不格式化，请大家自行修改。
html 结构
html 代码按照我们讲的基本布局完成，代码如下：
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 代码说明：btnList 中的每一个 span 标签我们添加了自定义属性 index，是为了在 JS 处理时更方便；imgList 定义了内联属性，是为了初始显示第一张图片。
CSS 样式
代码的 CSS 样式由我们各自喜好定制即可，代码如下：
- { margin: 0; padding: 0; text-decoration: none; }
body { padding: 20px; }
#container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative; }
#imgList { width: 4200px; height: 400px; position: absolute; z-index: 1; }
#imgList img { float: left; }
#btnList { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
#btnList span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px; }
#btnList .on { background: orangered; }
.arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0, 0, 0, 0.3); color: #fff; }
.arrow:hover { background-color: RGBA(0, 0, 0, 0.7); }
#container:hover .arrow { display: block; }
#prev { left: 20px; }
#next { right: 20px; }
1
2
3
4
5
6
7
8
9
10
11
12
13
JS 代码书写
接下来让我们一步一步完成。
获取页面的 DOM 元素，如下：
let oDiv = document.getElementById(‘container’)
let oImgList = document.getElementById(‘imgList’)
let oButtons = document.getElementById(‘btnList’).getElementsByTagName(‘span’)
let oPrev = document.getElementById(‘prev’)
let oNext = document.getElementById(‘next’)
1
2
3
4
5
给两个按钮绑定点击事件，来移动 imgList：
oPrev.onclick = function() {
oImgList.style.left = parseInt(oImgList.style.left) + 600 + ‘px’ // 右移600px
}
oNext.onclick = function() {
oImgList.style.left = parseInt(oImgList.style.left) - 600 + ‘px’ // 左移600px
}
1
2
3
4
5
6
抽象出 animate
两个点击事件中移动 imgList 的代码我们可以抽象出来，改为如下：
function animate(offsetLeft) {
oImgList.style.left = parseInt(oImgList.style.left) + offsetLeft + ‘px’
}
oPrev.onclick = function() {
animate(600) // 整体右移600px，相当于往前翻页
}
oNext.onclick = function() {
animate(-600) // 整体左移600px，相当于往后翻页
}
1
2
3
4
5
6
7
8
9
此时按下 next 按钮和 prev 按钮可以实现翻页，但是没有边界判断，会翻出空白来，所以我们添加边界条件。
当我们翻页到第一张时，再翻上一页，会翻到第 5 张图，所以我们在第一张前面添加了一个第五张图片的缓冲图；同理当你翻页到第五张之后，再翻下一页，会到第一张的缓冲图。
此处我多做一些说明：
假设我们有 N 张照片，把容器宽度设置为N+2个图片的宽度，示例如下图，两端填充如图，当处于一端时，且即将进入循环状态的时候，如第二张图，从状态 1 滑动到状态 2，在滑动结束的时候，将当前的位置直接转到状态 3，直接修改容器偏移，在视觉上是循环的。
添加边界条件
将 animate 改为如下代码：
function animate(offsetLeft) {
oImgList.style.left = parseInt(oImgList.style.left) + offsetLeft + ‘px’
if (parseInt(oImgList.style.left) > -600) { // 抵达第5张的预设图
oImgList.style.left = -3000 + ‘px’ // 切换到第五张图
}
if (parseInt(oImgList.style.left) < -3000) {
oImgList.style.left = -600 + ‘px’ // 切换到第一张图
}
}
1
2
3
4
5
6
7
8
9
将代码中的冗余变量做提取：
function animate(offsetLeft) {
let newLeft = parseInt(oImgList.style.left) + offsetLeft
oImgList.style.left = newLeft + ‘px’
if (newLeft > -600) { // 抵达第5张的预设图
oImgList.style.left = -3000 + ‘px’ // 切换到第五张图
}
if (newLeft < -3000) { // 抵达第一张预设图
oImgList.style.left = -600 + ‘px’ // 切换到第一张图
}
}
1
2
3
4
5
6
7
8
9
10
可以看到基础效果已经完成。
绑定圆点跟随效果
我们在按钮按下轮播图轮播的时候，需要底部圆点也跟随移动用作指示效果：
首先我们定义一个变量 index 方便操作，我们要在每次点击时显示圆点变化，代码如下：
oPrev.onclick = function() {
index -= 1 // 角标值减1
showButton() // 显示圆点变化
animate(600) // 整体右移600px，相当于往前翻页
}
oNext.onclick = function() {
index += 1
showButton() // 显示圆点变化
animate(-600) // 整体左移600px，相当于往后翻页
}
1
2
3
4
5
6
7
8
9
10
11
那么显示部分的代码如何编写呢？
function showButton() {
for (let i = 0; i < oButtons.length; i++) {
if (oButtons[i].className === ‘on’) { // 其余圆点样式关闭
oButtons[i].className = ‘’
break // 如果已经清除了圆点样式，直接跳出循环，减少资源消耗
}
}
oButtons[index - 1].className = ‘on’ // 当前索引的圆点点亮
}
1
2
3
4
5
6
7
8
9
此时尝试，会发现，圆点跟着变化了，但是圆点并没有设置边界条件，接下来给圆点设置边界：
oPrev.onclick = function() {
if (index === 1) { // 边界设置
index = 5
} else {
index -= 1 // 角标值减1
}
showButton() // 显示圆点变化
animate(600) // 整体右移600px，相当于往前翻页
}
oNext.onclick = function() {
if (index === 5) { //边界设置
index = 1
} else {
index += 1
}
showButton() // 显示圆点变化
animate(-600) // 整体左移600px，相当于往后翻页
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
绑定圆点点击事件
我们想要实现在点击圆点的时候，图片也会进行切换，思考一下和点击翻页有什么不同？？
翻页时：每次只会左移和右移固定的宽度，但是点击圆点时，左移和右移的宽度需要我们计算得出，比如从 1 到 3 那就需要移动 1200px。
如何实现呢？这时候我们的自定义属性就有用了，我们在 html 代码中对每个 span 标签添加了 index 这个自定义属性，可以通过 index 属性的值和程序中的 index 来计算宽度。代码如下：
for (let i = 0; i < oButtons.length; i++) {
oButtons[i].onclick = function() { // 遍历圆点，绑定点击事件
let myIndex = parseInt(this.getAttribute(‘index’)) // 获取自定义属性值
let offsetLeft = -600 * (myIndex - index) // 计算宽度
animate(offsetLeft) // 移动
index = myIndex // 更新index值
showButton() // 更新圆点动画
}
}
1
2
3
4
5
6
7
8
9
优化
如果当前页面在第一张图片，再次点击第一张图片，不应该进行切换，所以我们应该给是否点击当前页面做判断。
for (let i = 0; i < oButtons.length; i++) {
oButtons[i].onclick = function() { // 遍历圆点，绑定点击事件
if (this.className === ‘on’) { // 判断是否有必要执行
return
}
…
…
}
}
1
2
3
4
5
6
7
8
9
至此，我们的基本页面已经完成了，接下来完成动画效果部分。
动画效果
动画效果我们不采用 CSS3 实现，全部采用 JS 实现，利用 JS 的递归，在一定时间之内，对 left 的偏移量进行细分，细分过后逐步实现。
修改 animate 函数如下：
function animate(offsetLeft) {
let newLeft = parseInt(oImgList.style.left) + offsetLeft
let time = 300 // 位移总时间
let interval = 10 // 位移间隔时间
let speed = offset / (time / interval) // 每次的位移量
function go() {
if (
(speed < 0 && parseInt(oImgList.style.left) > newLeft) ||
(speed > 0 && parseInt(oImgList.style.left) < newLeft)
) { // 判断条件
oImgList.style.left = parseInt(oImgList.style.left) + speed + ‘px’
setTimeout(go, interval) // 间隔10ms再次执行go（递归）
} else {
oImgList.style.left = newLeft + ‘px’
if (newLeft > -600) { // 抵达第5张的预设图
oImgList.style.left = -3000 + ‘px’ // 切换到第五张图
}
if (newLeft < -3000) { // 抵达第一张预设图
oImgList.style.left = -600 + ‘px’ // 切换到第一张图
}
}
}
go() // 执行
}
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
此时基本动画已经执行完毕，但是会有 bug，在动画执行过程中，点击到按钮或者圆点，会再次触发动画，导致不规则情况出现。如下图：
所以我们应该在每次执行的时候判断是否当前正在动画，此时定义一个标志位 animated，初始值为 false。
在执行动画的时候将 animated 置为 true，执行完毕为 false。在每次执行的时候添加判断即可，将 animate 修改为如下：
function animate(offsetLeft) {
if (animated) {
return
}
animated = true
…
function go() {
if (
…
} else {
animated = false
…
}
}
go() // 执行
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
自动播放
我们希望在鼠标滑出图片，不做任何操作的时候，图片自动播放，鼠标滑入时，停止自动播放。
自动播放就相当于，每隔一定的时间，执行一次 next.onclik() 事件：
function play() { // 自动播放
timer = setInterval(function() { // 定时3秒执行next.onclick()
next.onclick()
}, 3000)
}
function stop() {
clearInterval(timer) // 清除定时器
}
oDiv.onmouseout = play // 鼠标移除执行play
oDiv.onmouseover = stop // 鼠标移入执行stop
play() // 首次执行
1
2
3
4
5
6
7
8
9
10
11
至此我们的焦点轮播图就完成了，效果图如下：
给出所有 JavaScript 代码如下：
window.onload = function () {
let oDiv = document.getElementById(‘container’)
let oImgList = document.getElementById(‘imgList’)
let oButtons = document.getElementById(‘btnList’).getElementsByTagName(‘span’)
let oPrev = document.getElementById(‘prev’)
let oNext = document.getElementById(‘next’)
let index = 1
let animated = false
let timer
// 显示底部圆点
function showButton () {
for (let i = 0; i < oButtons.length; i++) {
if (oButtons[i].className === ‘on’) { // 其余圆点样式关闭
oButtons[i].className = ‘’
break // 如果已经清除了圆点样式，直接跳出循环，减少资源消耗
}
}
oButtons[index - 1].className = ‘on’ // 当前索引的圆点点亮
}
// 动画
function animate (offsetLeft) {
if (animated) {
return
}
animated = true
let newLeft = parseInt(oImgList.style.left) + offsetLeft
let time = 1000 // 位移总时间
let interval = 10 // 位移间隔时间
let speed = offsetLeft / (time / interval) // 每次的位移量
function go () {
if ((speed < 0 && parseInt(oImgList.style.left) > newLeft) || (speed > 0 && parseInt(oImgList.style.left) < newLeft)) {
oImgList.style.left = parseInt(oImgList.style.left) + speed + ‘px’
setTimeout(go, interval) // 间隔10ms再次执行go（递归）
} else {
animated = false
oImgList.style.left = newLeft + ‘px’
if (newLeft > -600) { // 抵达第5张的预设图
oImgList.style.left = -3000 + ‘px’ // 切换到第五张图
}
if (newLeft < -3000) { // 抵达第一张预设图
oImgList.style.left = -600 + ‘px’ // 切换到第一张图
}
}
}
go() // 执行
}
function play () {
timer = setInterval(function () {
next.onclick() // 间隔触发
}, 1000)
}
function stop () {
clearInterval(timer) //清除定时器
}
oDiv.onmouseout = play
oDiv.onmouseover = stop
play() // 首次执行
oPrev.onclick = function () { // 上翻
if (index === 1) { // 边界设置
index = 5
} else {
index -= 1 // 角标值减1
}
showButton() // 显示按钮变化
animate(600) // 整体右移600px，相当于往前翻页
}
oNext.onclick = function () { // 下翻
if (index === 5) { // 边界设置
index = 1
} else {
index += 1
}
showButton() // 显示圆点变化
animate(-600) // 整体左移600px，相当于往后翻页
}
// 绑定底部圆点
for (let i = 0; i < oButtons.length; i++) {
oButtons[i].onclick = function () { // 遍历圆点，绑定点击事件
if (this.className === ‘on’) { // 判断是否有必要执行
return
}
let myIndex = parseInt(this.getAttribute(‘index’)) // 获取自定义属性值
let offsetLeft = -600 * (myIndex - index) // 计算宽度
animate(offsetLeft) // 移动
index = myIndex // 更新index值
showButton() // 更新圆点动画
}
}
}
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
Github地址如下：
https://github.com/DongpoXu/imooc
https://www.imdb.com/list/ls085664260/
https://www.imdb.com/list/ls085664242/
https://www.imdb.com/list/ls085664454/
https://www.imdb.com/list/ls085664439/
https://www.imdb.com/list/ls085664499/
https://www.imdb.com/list/ls085664910/
https://www.imdb.com/list/ls085664945/
https://www.imdb.com/list/ls085664984/
https://www.imdb.com/list/ls085664835/
https://www.imdb.com/list/ls085664893/
https://www.imdb.com/list/ls085669059/
https://www.imdb.com/list/ls085669031/
https://www.imdb.com/list/ls085669042/
https://www.imdb.com/list/ls085669551/
https://www.imdb.com/list/ls085669594/
https://www.imdb.com/list/ls085669751/
https://www.imdb.com/list/ls085669766/
https://www.imdb.com/list/ls085669796/
https://www.imdb.com/list/ls085669130/
https://www.imdb.com/list/ls085669189/
https://www.imdb.com/list/ls085669324/
https://www.imdb.com/list/ls085669602/
https://www.imdb.com/list/ls085669627/
https://www.imdb.com/list/ls085669699/
https://www.imdb.com/list/ls085669216/
https://www.imdb.com/list/ls085669241/
https://www.imdb.com/list/ls085669454/
https://www.imdb.com/list/ls085669431/
https://www.imdb.com/list/ls085669492/
https://www.imdb.com/list/ls085669909/
https://www.imdb.com/list/ls085669938/
https://www.imdb.com/list/ls085669943/
https://www.imdb.com/list/ls085669870/
https://www.imdb.com/list/ls085669865/
https://www.imdb.com/list/ls085669880/
https://www.imdb.com/list/ls085668079/
https://www.imdb.com/list/ls085668098/
https://www.imdb.com/list/ls085668765/
https://www.imdb.com/list/ls085668102/
https://www.imdb.com/list/ls085668114/
https://www.imdb.com/list/ls085668192/
https://www.imdb.com/list/ls085668359/
https://www.imdb.com/list/ls085668321/
https://www.imdb.com/list/ls085668651/
https://www.imdb.com/list/ls085668642/
https://www.imdb.com/list/ls085668250/
https://www.imdb.com/list/ls085668239/
https://www.imdb.com/list/ls085668243/
https://www.imdb.com/list/ls085668475/
https://www.imdb.com/list/ls085668427/
https://www.imdb.com/list/ls085668906/
https://www.imdb.com/list/ls085668935/
https://www.imdb.com/list/ls085668991/
https://www.imdb.com/list/ls085668870/
https://www.imdb.com/list/ls085668894/
https://www.imdb.com/list/ls085620070/
https://www.imdb.com/list/ls085620064/
https://www.imdb.com/list/ls085620087/
https://www.imdb.com/list/ls085620560/
https://www.imdb.com/list/ls085620541/
https://www.imdb.com/list/ls085620773/
https://www.imdb.com/list/ls085620738/
https://www.imdb.com/list/ls085620786/
https://www.imdb.com/list/ls085620170/
https://www.imdb.com/list/ls085620146/
https://www.imdb.com/list/ls085620353/
https://www.imdb.com/list/ls085620340/
https://www.imdb.com/list/ls085620608/
https://www.imdb.com/list/ls085620664/
https://www.imdb.com/list/ls085620680/
https://www.imdb.com/list/ls085620263/
https://www.imdb.com/list/ls085620285/
https://www.imdb.com/list/ls085620471/
https://www.imdb.com/list/ls085620427/
https://www.imdb.com/list/ls085620951/
https://www.imdb.com/list/ls085620931/
https://www.imdb.com/list/ls085620989/
https://www.imdb.com/list/ls085620835/
https://www.imdb.com/list/ls085620892/
https://www.imdb.com/list/ls085625075/
https://www.imdb.com/list/ls085625025/
https://www.imdb.com/list/ls085625085/
https://www.imdb.com/list/ls085625511/
https://www.imdb.com/list/ls085625520/
https://www.imdb.com/list/ls085625758/
https://www.imdb.com/list/ls085625766/
https://www.imdb.com/list/ls085625104/
https://www.imdb.com/list/ls085625110/
https://www.imdb.com/list/ls085625197/
https://www.imdb.com/list/ls085625304/
https://www.imdb.com/list/ls085625365/
https://www.imdb.com/list/ls085625393/
https://www.imdb.com/list/ls085625659/
https://www.imdb.com/list/ls085625661/
https://www.imdb.com/list/ls085625683/
https://www.imdb.com/list/ls085625257/
https://www.imdb.com/list/ls085625261/
https://www.imdb.com/list/ls085625243/
https://www.imdb.com/list/ls085625455/
https://www.imdb.com/list/ls085625430/
https://www.imdb.com/list/ls085625446/
https://www.imdb.com/list/ls085625488/
https://www.imdb.com/list/ls085625936/
https://www.imdb.com/list/ls085625985/
https://www.imdb.com/list/ls085625810/
https://www.imdb.com/list/ls085625865/
https://www.imdb.com/list/ls085625883/
https://www.imdb.com/list/ls085627059/
https://www.imdb.com/list/ls085627021/
https://www.imdb.com/list/ls085627508/
https://www.imdb.com/list/ls085627562/
https://www.imdb.com/list/ls085627549/
https://www.imdb.com/list/ls085627779/
https://www.imdb.com/list/ls085627763/
https://www.imdb.com/list/ls085627116/
https://www.imdb.com/list/ls085627145/
https://www.imdb.com/list/ls085627359/
https://www.imdb.com/list/ls085627327/
https://www.imdb.com/list/ls085627613/
https://www.imdb.com/list/ls085627646/
https://www.imdb.com/list/ls085627218/
https://www.imdb.com/list/ls085627246/
https://www.imdb.com/list/ls085627431/
https://www.imdb.com/list/ls085627446/
https://www.imdb.com/list/ls085627973/
https://www.imdb.com/list/ls085627969/
https://www.imdb.com/list/ls085627802/
https://www.imdb.com/list/ls085627878/
https://www.imdb.com/list/ls085627883/
https://www.imdb.com/list/ls085621017/
https://www.imdb.com/list/ls085621095/
https://www.imdb.com/list/ls085621558/
https://www.imdb.com/list/ls085621547/
https://www.imdb.com/list/ls085621757/
https://www.imdb.com/list/ls085621723/
https://www.imdb.com/list/ls085621107/
https://www.imdb.com/list/ls085621136/
https://www.imdb.com/list/ls085621144/
https://www.imdb.com/list/ls085621371/
https://www.imdb.com/list/ls085621320/
https://www.imdb.com/list/ls085621653/
https://www.imdb.com/list/ls085621667/
https://www.imdb.com/list/ls085621683/
https://www.imdb.com/list/ls085621211/
https://www.imdb.com/list/ls085621242/
https://www.imdb.com/list/ls085621400/
https://www.imdb.com/list/ls085621461/
https://www.imdb.com/list/ls085621492/
https://www.imdb.com/list/ls085621977/
https://www.imdb.com/list/ls085621929/
https://www.imdb.com/list/ls085621806/
https://www.imdb.com/list/ls085621811/
https://www.imdb.com/list/ls085621823/
https://www.imdb.com/list/ls085621892/
https://www.imdb.com/list/ls085623039/
https://www.imdb.com/list/ls085623095/
https://www.imdb.com/list/ls085623510/
https://www.imdb.com/list/ls085623560/
https://www.imdb.com/list/ls085623707/
https://www.imdb.com/list/ls085623717/
https://www.imdb.com/list/ls085623749/
https://www.imdb.com/list/ls085623150/
https://www.imdb.com/list/ls085623126/
https://www.imdb.com/list/ls085623182/
https://www.imdb.com/list/ls085623338/
https://www.imdb.com/list/ls085623398/
https://www.imdb.com/list/ls085623616/
https://www.imdb.com/list/ls085623640/
https://www.imdb.com/list/ls085623257/
https://www.imdb.com/list/ls085623235/
https://www.imdb.com/list/ls085623284/
https://www.imdb.com/list/ls085623417/
https://www.imdb.com/list/ls085623449/
https://www.imdb.com/list/ls085623956/
https://www.imdb.com/list/ls085623982/
https://www.imdb.com/list/ls085623833/
https://www.imdb.com/list/ls085623885/
https://www.imdb.com/list/ls085626015/
https://www.imdb.com/list/ls085626093/
https://www.imdb.com/list/ls085626554/
https://www.imdb.com/list/ls085626523/
https://www.imdb.com/list/ls085626753/
https://www.imdb.com/list/ls085626724/
https://www.imdb.com/list/ls085626105/
https://www.imdb.com/list/ls085626161/
https://www.imdb.com/list/ls085626192/
https://www.imdb.com/list/ls085626333/
https://www.imdb.com/list/ls085626348/
https://www.imdb.com/list/ls085626632/
https://www.imdb.com/list/ls085626699/
https://www.imdb.com/list/ls085626239/
https://www.imdb.com/list/ls085626299/
https://www.imdb.com/list/ls085626479/
https://www.imdb.com/list/ls085626446/
https://www.imdb.com/list/ls085626912/
https://www.imdb.com/list/ls085626997/
https://www.imdb.com/list/ls085626866/
https://www.imdb.com/list/ls085626897/
https://www.imdb.com/list/ls085622014/
https://www.imdb.com/list/ls085622041/
https://www.imdb.com/list/ls085622572/
https://www.imdb.com/list/ls085622567/
https://www.imdb.com/list/ls085622705/
https://www.imdb.com/list/ls085622711/
https://www.imdb.com/list/ls085622744/
https://www.imdb.com/list/ls085622177/
https://www.imdb.com/list/ls085622198/
https://www.imdb.com/list/ls085622377/
https://www.imdb.com/list/ls085622344/
https://www.imdb.com/list/ls085622658/
https://www.imdb.com/list/ls085622649/
https://www.imdb.com/list/ls085622275/
https://www.imdb.com/list/ls085622245/
https://www.imdb.com/list/ls085622471/
https://www.imdb.com/list/ls085622442/
https://www.imdb.com/list/ls085622971/
https://www.imdb.com/list/ls085622990/
https://www.imdb.com/list/ls085622873/
https://www.imdb.com/list/ls085622895/
https://www.imdb.com/list/ls085624055/
https://www.imdb.com/list/ls085624027/
https://www.imdb.com/list/ls085624096/
https://www.imdb.com/list/ls085624519/
https://www.imdb.com/list/ls085624595/
https://www.imdb.com/list/ls085624715/
https://www.imdb.com/list/ls085624723/
https://www.imdb.com/list/ls085624110/
https://www.imdb.com/list/ls085624120/
https://www.imdb.com/list/ls085624352/
https://www.imdb.com/list/ls085624365/
https://www.imdb.com/list/ls085624601/
https://www.imdb.com/list/ls085624635/
https://www.imdb.com/list/ls085624687/
https://www.imdb.com/list/ls085624277/
https://www.imdb.com/list/ls085624240/
https://www.imdb.com/list/ls085624405/
https://www.imdb.com/list/ls085624469/
https://www.imdb.com/list/ls085624483/
https://www.imdb.com/list/ls085624920/
https://www.imdb.com/list/ls085624809/
https://www.imdb.com/list/ls085624826/
https://www.imdb.com/list/ls085629056/
https://www.imdb.com/list/ls085629029/
https://www.imdb.com/list/ls085629506/
https://www.imdb.com/list/ls085629566/
https://www.imdb.com/list/ls085629587/
https://www.imdb.com/list/ls085629732/
https://www.imdb.com/list/ls085629790/
https://www.imdb.com/list/ls085629175/
https://www.imdb.com/list/ls085629160/
https://www.imdb.com/list/ls085629302/
https://www.imdb.com/list/ls085629312/
https://www.imdb.com/list/ls085629348/
https://www.imdb.com/list/ls085629658/
https://www.imdb.com/list/ls085629643/
https://www.imdb.com/list/ls085629208/
https://www.imdb.com/list/ls085629266/
https://www.imdb.com/list/ls085629248/
https://www.imdb.com/list/ls085629416/
https://www.imdb.com/list/ls085629421/
https://www.imdb.com/list/ls085629909/
https://www.imdb.com/list/ls085629918/
https://www.imdb.com/list/ls085629994/
https://www.imdb.com/list/ls085629876/
https://www.imdb.com/list/ls085629890/
https://www.imdb.com/list/ls085628051/
https://www.imdb.com/list/ls085628064/
https://www.imdb.com/list/ls085628098/
https://www.imdb.com/list/ls085628517/
https://www.imdb.com/list/ls085628544/
https://www.imdb.com/list/ls085628759/
https://www.imdb.com/list/ls085628738/
https://www.imdb.com/list/ls085628798/
https://www.imdb.com/list/ls085628172/
https://www.imdb.com/list/ls085628140/
https://www.imdb.com/list/ls085628304/
https://www.imdb.com/list/ls085628335/
https://www.imdb.com/list/ls085628329/
https://www.imdb.com/list/ls085628609/
https://www.imdb.com/list/ls085628630/
https://www.imdb.com/list/ls085628644/
https://www.imdb.com/list/ls085628251/
https://www.imdb.com/list/ls085628264/
https://www.imdb.com/list/ls085628401/
https://www.imdb.com/list/ls085628466/
https://www.imdb.com/list/ls085628497/
https://www.imdb.com/list/ls085628975/
https://www.imdb.com/list/ls085628969/
https://www.imdb.com/list/ls085628852/
https://www.imdb.com/list/ls085628836/
https://www.imdb.com/list/ls085640004/
https://www.imdb.com/list/ls085640018/
https://www.imdb.com/list/ls085640090/
https://www.imdb.com/list/ls085640550/
https://www.imdb.com/list/ls085640590/
https://www.imdb.com/list/ls085640754/
https://www.imdb.com/list/ls085640723/
https://www.imdb.com/list/ls085640789/
https://www.imdb.com/list/ls085640166/
https://www.imdb.com/list/ls085640180/
https://www.imdb.com/list/ls085640312/
https://www.imdb.com/list/ls085640326/
https://www.imdb.com/list/ls085640606/
https://www.imdb.com/list/ls085640619/
https://www.imdb.com/list/ls085640646/
https://www.imdb.com/list/ls085640202/
https://www.imdb.com/list/ls085640239/
https://www.imdb.com/list/ls085640294/
https://www.imdb.com/list/ls085640479/
https://www.imdb.com/list/ls085640468/
https://www.imdb.com/list/ls085640488/
https://www.imdb.com/list/ls085640930/
https://www.imdb.com/list/ls085647115/
https://www.imdb.com/list/ls085647122/
https://www.imdb.com/list/ls085647359/
https://www.imdb.com/list/ls085647327/
https://www.imdb.com/list/ls085647653/
https://www.imdb.com/list/ls085647620/
https://www.imdb.com/list/ls085647277/
https://www.imdb.com/list/ls085647221/
https://www.imdb.com/list/ls085647474/
https://www.imdb.com/list/ls085647468/
https://www.imdb.com/list/ls085647908/
https://www.imdb.com/list/ls085647965/
https://www.imdb.com/list/ls085647871/
https://www.imdb.com/list/ls085647849/
https://www.imdb.com/list/ls085641014/
https://www.imdb.com/list/ls085641041/
https://www.imdb.com/list/ls085641516/
https://www.imdb.com/list/ls085641549/
https://www.imdb.com/list/ls085641710/
https://www.imdb.com/list/ls085641749/
https://www.imdb.com/list/ls085641137/
https://www.imdb.com/list/ls085641180/
https://www.imdb.com/list/ls085641363/
https://www.imdb.com/list/ls085641604/
https://www.imdb.com/list/ls085641646/
https://www.imdb.com/list/ls085641273/
https://www.imdb.com/list/ls085641289/
https://www.imdb.com/list/ls085641465/
https://www.imdb.com/list/ls085641952/
https://www.imdb.com/list/ls085641965/
https://www.imdb.com/list/ls085641832/
https://www.imdb.com/list/ls085641891/
https://www.imdb.com/list/ls085643035/
https://www.imdb.com/list/ls085643096/
https://www.imdb.com/list/ls085643531/
https://www.imdb.com/list/ls085643597/
https://www.imdb.com/list/ls085643720/
https://www.imdb.com/list/ls085643102/
https://www.imdb.com/list/ls085643126/
https://www.imdb.com/list/ls085643355/
https://www.imdb.com/list/ls085643390/
https://www.imdb.com/list/ls085643671/
https://www.imdb.com/list/ls085643695/
https://www.imdb.com/list/ls085643219/
https://www.imdb.com/list/ls085643280/
https://www.imdb.com/list/ls085643476/
https://www.imdb.com/list/ls085643499/
https://www.imdb.com/list/ls085643916/
https://www.imdb.com/list/ls085643984/
https://www.imdb.com/list/ls085643817/
https://www.imdb.com/list/ls085643885/
https://www.imdb.com/list/ls085646015/
https://www.imdb.com/list/ls085646043/
https://www.imdb.com/list/ls085646557/
https://www.imdb.com/list/ls085646545/
https://www.imdb.com/list/ls085646708/
https://www.imdb.com/list/ls085646728/
https://www.imdb.com/list/ls085646104/
https://www.imdb.com/list/ls085646125/
https://www.imdb.com/list/ls085646302/
https://www.imdb.com/list/ls085646392/
https://www.imdb.com/list/ls085646658/
https://www.imdb.com/list/ls085646642/
https://www.imdb.com/list/ls085646271/
https://www.imdb.com/list/ls085646296/
https://www.imdb.com/list/ls085646478/
https://www.imdb.com/list/ls085646480/
https://www.imdb.com/list/ls085646974/
https://www.imdb.com/list/ls085646990/
https://www.imdb.com/list/ls085646810/
https://www.imdb.com/list/ls085646881/
https://www.imdb.com/list/ls085642074/
https://www.imdb.com/list/ls085642097/
https://www.imdb.com/list/ls085642573/
https://www.imdb.com/list/ls085642751/
https://www.imdb.com/list/ls085642769/
https://www.imdb.com/list/ls085642154/
https://www.imdb.com/list/ls085642166/
https://www.imdb.com/list/ls085642356/
https://www.imdb.com/list/ls085642327/
https://www.imdb.com/list/ls085642667/
https://www.imdb.com/list/ls085642687/
https://www.imdb.com/list/ls085642260/
https://www.imdb.com/list/ls085642401/
https://www.imdb.com/list/ls085642422/
https://www.imdb.com/list/ls085642951/
https://www.imdb.com/list/ls085642989/
https://www.imdb.com/list/ls085642831/
https://www.imdb.com/list/ls085644076/
https://www.imdb.com/list/ls085644027/
https://www.imdb.com/list/ls085644530/
https://www.imdb.com/list/ls085644590/
https://www.imdb.com/list/ls085644715/
https://www.imdb.com/list/ls085644769/
https://www.imdb.com/list/ls085644160/
https://www.imdb.com/list/ls085644197/
https://www.imdb.com/list/ls085644312/
https://www.imdb.com/list/ls085644341/
https://www.imdb.com/list/ls085644643/
https://www.imdb.com/list/ls085644204/
https://www.imdb.com/list/ls085644283/
https://www.imdb.com/list/ls085644418/
https://www.imdb.com/list/ls085644908/
https://www.imdb.com/list/ls085644964/
https://www.imdb.com/list/ls085644833/
https://www.imdb.com/list/ls085644892/
https://www.imdb.com/list/ls085649027/
https://www.imdb.com/list/ls085649085/
https://www.imdb.com/list/ls085649531/
https://www.imdb.com/list/ls085649594/
https://www.imdb.com/list/ls085649714/
https://www.imdb.com/list/ls085649728/
https://www.imdb.com/list/ls085649136/
https://www.imdb.com/list/ls085649192/
https://www.imdb.com/list/ls085649391/
https://www.imdb.com/list/ls085649675/
https://www.imdb.com/list/ls085649257/
https://www.imdb.com/list/ls085649221/
https://www.imdb.com/list/ls085649452/
https://www.imdb.com/list/ls085649425/
https://www.imdb.com/list/ls085649960/
https://www.imdb.com/list/ls085649990/
https://www.imdb.com/list/ls085649822/
https://www.imdb.com/list/ls085648077/
https://www.imdb.com/list/ls085648082/
https://www.imdb.com/list/ls085648512/
https://www.imdb.com/list/ls085648718/
https://www.imdb.com/list/ls085648743/
https://www.imdb.com/list/ls085648113/
https://www.imdb.com/list/ls085648127/
https://www.imdb.com/list/ls085648371/
https://www.imdb.com/list/ls085648364/
https://www.imdb.com/list/ls085648605/
https://www.imdb.com/list/ls085648635/
https://www.imdb.com/list/ls085647740/
https://www.imdb.com/list/ls085647784/
https://www.imdb.com/list/ls085647132/
https://www.imdb.com/list/ls085647147/
https://www.imdb.com/list/ls085647356/
https://www.imdb.com/list/ls085647361/
https://www.imdb.com/list/ls085647385/
https://www.imdb.com/list/ls085647674/
https://www.imdb.com/list/ls085647649/
https://www.imdb.com/list/ls085647202/
https://www.imdb.com/list/ls085647264/
https://www.imdb.com/list/ls085647283/
https://www.imdb.com/list/ls085647426/
https://www.imdb.com/list/ls085647907/
https://www.imdb.com/list/ls085647938/
https://www.imdb.com/list/ls085647988/
https://www.imdb.com/list/ls085647827/
https://www.imdb.com/list/ls085641003/
https://www.imdb.com/list/ls085641068/
https://www.imdb.com/list/ls085641503/
https://www.imdb.com/list/ls085641525/
https://www.imdb.com/list/ls085641704/
https://www.imdb.com/list/ls085641723/
https://www.imdb.com/list/ls085641150/
https://www.imdb.com/list/ls085641146/
https://www.imdb.com/list/ls085641350/
https://www.imdb.com/list/ls085641393/
https://www.imdb.com/list/ls085641659/
https://www.imdb.com/list/ls085641692/
https://www.imdb.com/list/ls085641259/
https://www.imdb.com/list/ls085641225/
https://www.imdb.com/list/ls085641401/
https://www.imdb.com/list/ls085641468/
https://www.imdb.com/list/ls085641483/
https://www.imdb.com/list/ls085641947/
https://www.imdb.com/list/ls085641802/
https://www.imdb.com/list/ls085641841/
https://www.imdb.com/list/ls085643003/
https://www.imdb.com/list/ls085643048/
https://www.imdb.com/list/ls085643557/
https://www.imdb.com/list/ls085643526/
https://www.imdb.com/list/ls085643750/
https://www.imdb.com/list/ls085643729/
https://www.imdb.com/list/ls085643150/
https://www.imdb.com/list/ls085643302/
https://www.imdb.com/list/ls085643336/
https://www.imdb.com/list/ls085643603/
https://www.imdb.com/list/ls085643611/
https://www.imdb.com/list/ls085643258/
https://www.imdb.com/list/ls085643220/
https://www.imdb.com/list/ls085643451/
https://www.imdb.com/list/ls085643467/
https://www.imdb.com/list/ls085643484/
https://www.imdb.com/list/ls085643911/
最低0.47元/天 解锁文章
1159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
