汇集网上焦点轮播图的实现方式，自己试了下，不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效，不太明白，最后两行代码中，为什么可以直接写stop和play。不用加括号调用函数么？求懂的大神指点！
所用知识点：
1.DOM操作
2.定时器
3.事件运用
4.Js动画
5.函数递归
6.无限滚动大法(可以用js实现一个假图的制作。不过说实话一直理解不了假图的作用原理)
|
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
90
91
|
<style>
* {
margin
:
0
;
padding
:
0
;
}
a {
text-decoration
:
none
;
}
body {
padding
:
20px
;
}
#container {
width
:
600px
;
/*这里600x400是图片的宽高*/
height
:
400px
;
border
:
3px
solid
#333
;
overflow
:
hidden
;
/*隐藏溢出的图片，因为图片左浮动，总宽度为4200*/
position
:
relative
;
}
#list {
width
:
4200px
;
/*这里设置7张图片总宽度*/
height
:
400px
;
position
:
absolute
;
/*基于父容器container进行定位*/
z-index
:
1
;
}
#list img {
float
:
left
;
width
:
610px
;
}
#buttons {
position
:
absolute
;
height
:
10px
;
width
:
100px
;
z-index
:
2
;
/*按钮在图片的上面*/
bottom
:
20px
;
left
:
250px
;
}
#buttons span {
cursor
:
pointer
;
float
:
left
;
border
:
1px
solid
#fff
;
width
:
10px
;
height
:
10px
;
border-radius:
50%
;
background
:
#333
;
margin-right
:
5px
;
}
#buttons .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
, .
3
);
color
:
#fff
;
}
.arrow:hover {
background-color
: RGBA(
0
,
0
,
0
, .
7
);
}
#container:hover .arrow {
display
:
block
;
/*当鼠标放上去容器上面就显示左右切换按钮*/
}
#prev {
left
:
20px
;
}
#next {
right
:
20px
;
}
</style>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<
div
id
=
"container"
>
<
div
id
=
"list"
style
=
"left: -600px;"
>
<
img
src
=
"5.jpg"
alt
=
"1"
/>
<
img
src
=
"1.jpg"
alt
=
"1"
/>
<
img
src
=
"2.jpg"
alt
=
"2"
/>
<
img
src
=
"3.jpg"
alt
=
"3"
/>
<
img
src
=
"4.jpg"
alt
=
"4"
/>
<
img
src
=
"5.jpg"
alt
=
"5"
/>
<
img
src
=
"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:void(0);"
id
=
"prev"
class
=
"arrow"
><</
a
>
<
a
href
=
"javascript:void(0);"
id
=
"next"
class
=
"arrow"
>></
a
></
div
>
|
|
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
<script>
window.onload =
function
(){
var
container=document.getElementById(
'container'
);
var
list=document.getElementById(
'list'
);
var
buttons=document.getElementById(
'buttons'
).getElementsByTagName(
'span'
);
var
next=document.getElementById(
'next'
);
var
prev=document.getElementById(
'prev'
);
var
index=1;
var
len=5;
//图片的数量
var
animated=
false
;
//用于判断切换是否进行
var
interval=3000;
//自动播放定时器的秒数，3秒
var
timer;
//定时器
// 切换动画
function
animate(offset){
animated=
true
;
//切换进行中
var
time=300;
//位移总时间
var
inteval=10;
//位移间隔时间
var
speed=offset/(time/inteval);
//每次位移量
var
newLeft=parseInt(list.style.left)+offset;
var
go=
function
(){
if
((speed<0&&parseInt(list.style.left)>newLeft)||(speed>0&&parseInt(list.style.left)>newLeft)){
list.style.left=parseInt(list.style.left)+speed+
'px'
;
setTimeout(go,inteval);
}
else
{
animated=
false
;
list.style.left=newLeft+
'px'
;
if
(newLeft<-3000){
list.style.left=-600+
'px'
;
}
if
(newLeft>-600){
list.style.left=-3000+
'px'
;
}
}
}
go();
/*var newLeft=parseInt(list.style.left)+offset;
list.style.left=newLeft+'px';
if(newLeft<-3000){
list.style.left=-600+'px';
}
if(newLeft>-600){
list.style.left=-3000+'px';
}*/
}
// 为按钮添加样式
function
showButton(){
for
(
var
i=0;i<buttons.length;i++){
if
(buttons[i].className==
'on'
){
buttons[i].className=
''
;
break
;
}
}
buttons[index-1].className=
'on'
;
}
next.onclick=
function
(){
if
(animated){
return
;
}
if
(index==5){
index=1;
}
else
{
index+=1;
}
animate(-600);
showButton();
}
prev.onclick=
function
(){
if
(animated){
return
;
}
if
(index==1){
index=5;
}
else
{
index-=1;
}
animate(600);
showButton();
}
// 通过循环为按钮添加点击事件
for
(
var
i=0;i<buttons.length;i++){
buttons[i].onclick=
function
(){
if
(animated){
return
;
}
// 当继续点击当前按钮的时候，不进行切换
if
(
this
.className ==
'on'
){
return
;
}
// 通过获取按钮标签的自定义属性Index 得到索引值，再计算差值
var
myIndex = parseInt(
this
.getAttribute(
'index'
));
//真正的偏移量
var
offset = -600*(myIndex-index);
animate(offset);
index=myIndex;
showButton();
}
// 自动播放
function
play(){
timer=setTimeout(
function
(){
next.onclick();
play();
},interval)
}
function
stop(){
clearTimeout(timer);
}
container.onmouseover=stop;
container.onmouseout=play;
play();
}
}
</script>
|
本文转自 蓓蕾心晴 51CTO博客，原文链接：http://blog.51cto.com/beileixinqing/1903304，如需转载请自行联系原作者
