Web前端基础(14)JS实践案例--旋转木马效果

Demo演示效果

html布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="wrap" id="wrap">
<p class="headp"><a href="http://dp2px.com"><span id="headlink">旋转木马轮播效果</span></a></p>
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</div>

css样式很简单,让li绝对定位处于容器的中间,然后通过javascript动态设置位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrap{
width:1200px;
margin:100px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
width:100%;
}

初始化样式

首先初始化css样式,因为不同的浏览器对有些标签的默认值是不同的,所以通常我们都会通过初始化代码来清除默认样式。

1
2
3
4
5
6
7
8
/*初始化  reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}

前面我们都是写成下面这样的,为什么不这样写,这样写有什么问题呢?

1
*{margin:0; padding:0}

如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签都初始化一遍,这样就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间。

雅虎初始化代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
html {overflow-y: scroll;}

.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }

腾讯官网初始化代码

1
2
3
4
5
6
7
8
9
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}

新浪官网初始化代码

1
2
3
4
5
6
7
8
9
10
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}

ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}

a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

淘宝官网初始化代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

网易官网初始化代码

1
2
3
4
5
6
7
8
9
html {overflow-y:scroll;} 
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}

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
//  存储了每个图片的信息
var json = [
{ // 1
width:400,
top:20,
left:50,
opacity:20,
z:2
},
{ // 2
width:600,
top:70,
left:0,
opacity:80,
z:3
},
{ // 3
width:800,
top:100,
left:200,
opacity:100,
z:4
},
{ // 4
width:600,
top:70,
left:600,
opacity:80,
z:3
},
{ //5
width:400,
top:20,
left:750,
opacity:20,
z:2
}
];

接下来我们通过点击箭头的方向来计算这个json位置信息集合。

1
2
3
4
5
6
7
8
9
10
11
12
13
function change(flag) {
// 来判断箭头方向(滚动方向)
if(flag)
{
// 把 最后一个json 删除 并且把最后一个添加到json 第一个位置
json.unshift(json.pop());
}
else
{
// 移除第一个 放到json 最后一个
json.push(json.shift());
}
}

移动动画

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
/**
* Created by andy on 2015/11/23.
*/
// 多个属性运动框架 添加回调函数
function animate(obj, json, fn) { // 给谁 json
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面
for (var attr in json) { // attr 属性 json[attr] 值
//开始遍历 json
// 计算步长 用 target 位置 减去当前的位置 除以 10
// console.log(attr);
var current = 0;
if (attr == "opacity") {
current = Math.round(parseInt(getStyle(obj, attr) * 100)) || 0;
console.log(current);
}
else {
current = parseInt(getStyle(obj, attr)); // 数值
}
// console.log(current);
// 目标位置就是 属性值
var step = (json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判断透明度
if (attr == "opacity") // 判断用户有没有输入 opacity
{
if ("opacity" in obj.style) // 判断 我们浏览器是否支持opacity
{
// obj.style.opacity
obj.style.opacity = (current + step) / 100;
}
else { // obj.style.filter = alpha(opacity = 30)
obj.style.filter = "alpha(opacity = " + (current + step) * 10 + ")";

}
}
else if (attr == "zIndex") {
obj.style.zIndex = json[attr];
}
else {
obj.style[attr] = current + step + "px";
}

if (current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
{
flag = false;
}
}
if (flag) // 用于判断定时器的条件
{
clearInterval(obj.timer);
//alert("ok了");
if (fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调,就应该执行回调
{
fn(); // 函数名 + () 调用函数 执行函数
}
}
}, 10)
}
function getStyle(obj, attr) { // 谁的 那个属性
if (obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回传递过来的某个属性
}
else {
return window.getComputedStyle(obj, null)[attr]; // w3c 浏览器
}
}

触发动画执行

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
onclick = function() {
if(this.className == "prev")
{
// alert("左侧") 移除第一个 放到json 最后一个
if(jieliu == true)
{
change(false);
jieliu = false; // 点击完毕之后,立马取反
}

}
else
{
// alert('右侧'); 把 最后一个json 删除 并且把最后一个添加到json 第一个位置
if(jieliu == true)
{
change(true);
jieliu = false; // 点击完毕之后,立马取反
}
}
}

function change(flag) {
// 来判断
if(flag)
{
// 把 最后一个json 删除 并且把最后一个添加到json 第一个位置
json.unshift(json.pop());
}
else
{
// 移除第一个 放到json 最后一个
json.push(json.shift());
}
// 为什么给for呢? 以为我们的json 有5个 盒子li 有 5个
for(var i=0;i<json.length; i++)
{
animate(lis[i],{
width: json[i].width,
top: json[i].top,
left: json[i].left,
opacity:json[i].opacity,
zIndex:json[i].z
},function(){ jieliu = true;}) // 回调函数是等动画执行完毕 才行
}
}