IE：设置中打开调试功能，js代码中加入debugger，然后会启动调试，选择调试工具。
google chrome:右键点击“审查元素”，在Js代码中标记断点；再刷新就可以调试。
一.轮播图制作思路：就是通过修改每一张图片的透明度，让其每隔一段时间将其中的某一张图片透明度设为1，显示出来；而其它的设为0，不显示。从而实现一种图片轮流播放的效果。
思路比较简单：
1.首先让一组图片绝对定位，让其重叠在一起，
2.通过js获取相应的标签,为后面的步骤做铺垫
3、然后制作手动轮播：点击小方块按钮，显示相应图片。
（1）通过设置图片的透明度变化来控制图片的显示效果。（更简单的效果是直接修改display属性，用display:block让该图片显示出来,而设置display:none就可以把其他的图片隐藏起来，这两种方法原理相同。）
（2）当点击小圆点时使它相对应的图片显示并且当前li的背景颜色设置为白色；
4、点击左右箭头，实现向前向后轮播图片。
二.具体代码实现
首先来看Html结构代码：
<div class="box">
<ul id="boxul">
<li><img src="images/f1.jpg" alt=""></li>
<li><img src="images/f2.jpg" alt=""></li>
<li><img src="images/f3.jpg" alt=""></li>
<li><img src="images/f4.jpg" alt=""></li>
<li><img src="images/f5.jpg" alt=""></li>
</ul>
<ol id="boxol">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<div class="prev" id="prev">prev</div>
<div class="next" id="next">next</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
对其进行样式调整之后，图片都在同一个位置，可以先给第一图片设置为显示，其它的图片设为不显示。
下面来看js的代码：
*{
padding: 0
margin: 0
}
/* 长按标签会有蓝色背景 */
*::selection {
background: none
}
li{
list-style: none
}
/* 子绝父相 */
.box{
width: 800px
height: 500px
margin: 50px auto
position: relative
}
/* 设置所有的图片不显示 */
.box ul li {
width: 800px
height: 500px
position: absolute
opacity: 0
/* 过度显示图片 */
transition: all .8s
}
/* 设置第一张图片可见 */
.box ul li:first-child {
opacity: 1
}
/*左右箭头*/
.prev,
.next {
width: 80px
height: 40px
position: absolute
/* 背景色 */
background-color: rgba(0, 0, 0, .7)
/* 文字设置 */
color: white
text-align: center
line-height: 40px
/* 位置 */
top: 50%
margin-top: -20px
/* 鼠标移上去的效果 */
cursor: pointer
}
.next{
right: 0
}
.prev:active,
.next:active {
background-color: rgba(0, 0, 0, .5)
}
.prev:hover,
.next:hover{
background-color: rgba(0, 0, 0, .6)
}
/* 小方块的位置 */
.box ol{
position: absolute
right: 50px
bottom: 20px
}
.box ol li {
width: 20px
height: 20px
border: 1px solid #ccc
float: left
text-align: center
line-height: 20px
cursor: pointer
}
.current{
background-color: yellow
}
img{
width: 800px
height: 500px
}
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
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
js的具体代码如下：
//1.1获取ul元素
var boxul = document.getElementById("boxul")
var lis = boxul.querySelectorAll("li")
console.log(lis.length)
//1.2获取ol
var boxol = document.getElementById("boxol")
//获取Ol下面的li
var ol_lis = boxol.querySelectorAll("li")
//console.log(ol_lis)
//获得箭头
var prev = document.getElementById("prev")
var next = document.getElementById("next")
//给ol的li添加点击事件
for(var i = 0 i<ol_lis.lengthi++){
// console.log(i)
//给oll的i设置index
ol_lis[i].setAttribute("index",i)
ol_lis[i].onclick = function(){
for(var i = 0 i<ol_lis.lengthi++){
ol_lis[i].className = ""
lis[i].style.opacity = 0
}
this.className = "current"
var index = parseInt(this.getAttribute("index"))
lis[index].style.opacity = 1
}
}
//console.log(ol_lis)
//2.给next按钮注册点击事件，让所有的li的透明度变为0，让当前的透明度变为1
var index = 0
var old_li = lis[0]
var new_li
next.onclick = function(){
index++
// 到5时，切到第一张图
if(index == lis.length){
index = 0
}
old_li.style.opacity = 0
new_li = lis[index]
new_li.style.opacity = 1
old_li = new_li
//ol下li的颜色变化
for(var i =0i<lis.lengthi++){
ol_lis[i].className = ""
}
ol_lis[index].className = "current"
}
//3.给上一个按钮注册点击事件，让所有的li的透明度变为0，让当前的透明度变为1
// console.log(index)
// old_li.style.opacity =0
// new_li = lis[index]
// new_li.style.opacity = 1
prev.onclick = function(){
// 从第一张图到下标为4的图
if(index == 0){
index = lis.length
}
index--
old_li.style.opacity = 0
new_li = lis[index]
new_li.style.opacity = 1
old_li = new_li
//ol下li的颜色变化
for(var i =0i<lis.lengthi++){
ol_lis[i].className = ""
}
ol_lis[index].className = "current"
}
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
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
这里面实现的时候结合了css3的transition属性，让图片的切换有一个过渡效果
三、相关知识点。
1、获取DOM元素：
（1）document.getElementsById():通过id获取对象，id是唯一的，可以不获取。
（2）document.getElementsByClassName()：通过class属性获取对象。
（3）document.getElementsByTagName()：通过标签名获取对象。
（4）document.querySelectorAll():可通过所有获取。
2、(1)onmouseover():鼠标移上时事件；
(2)onmouseout():鼠标移开时事件；
3、onclick():单击事件。
在f12 js断点失效步骤如下：1.首先，正常情况下，js断点是有效的。
2.这个问题，与VS的调试设置无关，与IE的选项中的“是否禁用调试”也无关。也就是说，无论你怎么修改这些东西，VS能调试时就一定能下断点，出了这个问题时，无论你改不改这些参数，断点也一定无效。
3.我目前遇到过一次，由于修改了很多东西，导致目前还没能确认到底是哪个修改操作导致的。
4.应急措施：用debugger指令来代替断点。注意了，debugger是用来代替断点功能的。因此，使用了这个指令，无需再下断点。VS2012在遇到它时，就会像该行有断点一样地中断。因此，调试完后，记得删除这个标志。
5.VS2012的js调试，是不需要设置任何东西的。VS2012的调试选项不需要设置，IE的选项也不需要设置。网上很多帖子说要设置，那些是针对老版本的。对于VS2012，还是那句话，无论你改不改设置，没遇到这个问题，你就一定能调试js，遇到了这个问题，断点就一定会失效。
6.debugger也无效了？好吧，我用了debugger大约半个月后，发现它也无效了。最后，重装win7和vs2012后，js调试功能又可以用了。装完win7后有一个发现，那就是windows 7的系统补丁，里面有ie9与ie10的升级补丁。如果你没注意，全部安装了，那么默认的ie8，最后会升级到ie10。我现在的做法是，对于补丁中，与浏览器相关的，只安装与ie8有关的。ie9与ie10的升级补丁，不安装，把它们隐藏掉就行。
