实现思路
一步一步来
- 图片切换
- 鼠标悬停
- 按钮跟踪
- ………………
源代码
css javascript 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
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>轮播图片</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div {
margin:50px;
width: 470px;
}
div ul{
float: right;
margin-top:45px;
}
div ul li{
list-style:none;
width:30px;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px solid orange;
margin-top:5px;
}
</style>
<script type="text/javascript">
window.onload = init;
var i =1;
var time;
function init(){
var obj = document.getElementById("d1");
//解决第一背景颜色不变的情况
obj.style.background = "orange";
time = window.setInterval('change()',1000);
}
function change(){
i++;
if (i>5) {
i=1;
}
var obj = document.getElementById('img');
obj.src = "images/beijing_" + i + ".jpg";
var obj2 = document.getElementById("d"+i);
obj2.style.background = "orange";
for (var j=1 ; j<6; j++){
if(j!=i){
var obj3 = document.getElementById("d"+j);
obj3.style.background = "white";
}
}
}
function stop(){
window.clearInterval(time);
}
function start(){
time = window.setInterval('change()',1000);
}
function stopImg(n,m){
i = n;
var obj = document.getElementById('img');
obj.src = "images/beijing_" + i + ".jpg";
window.clearInterval(time);
m.style.background="orange";
for (var j=1 ; j<6; j++){
if(j!=i){
var obj3 = document.getElementById("d"+j);
obj3.style.background = "white";
}
}
}
function startImg(m){
time = window.setInterval('change()',1000);
}
</script>
</head>
<body>
<div>
<img src="images/beijing_1.jpg" width="400" id="img" onmousemove="stop()" onmouseout="start()" title="背景图1" alt="背景图1">
<ul>
<li id="d1" onmousemove="stopImg(1,this)" onmouseout="startImg(this)">1</li>
<li id="d2" onmousemove="stopImg(2,this)" onmouseout="startImg(this)">2</li>
<li id="d3" onmousemove="stopImg(3,this)" onmouseout="startImg(this)">3</li>
<li id="d4" onmousemove="stopImg(4,this)" onmouseout="startImg(this)">4</li>
<li id="d5" onmousemove="stopImg(5,this)" onmouseout="startImg(this)">5</li>
</ul>
</div>
</body>
</html>
代码分析
声明全局变量：背景图变换的序号i,用于清楚定时器的time；
第一步：初始化函数中加入一个交换背景图片的反复性定时器用于加载交换函数
第二步：图片自动播放联动按钮变化：在交换函数中通过for循环改变i的值，再通过元素样式对象属性进行切换图片；通过第二个循环，与第一循环的i值关联，用于联动按钮的背景样式
第三步：写一个stop函数当鼠标放置在img上清楚定时器，start函数鼠标离开时重新启动定时器(注意设置定时器名字)（dsq=window.setInterval("change()",1000);）重写一遍定时器
第五步：按钮点击联动图片自动切换：通过使用函数值传递，进行判断切换stopImg函数(注意i=n来控制图片切换避免鼠标离开时乱启动图片)<li id="d1" onmousemove="stopImg(1,this)" onmouseout="startImg(this)">1</li>