1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *
{
8 margin: 0
;
9 padding: 0
;
10 border: none;
11 list-
style: none;
12 }
13
14 img {
15 vertical-
align: top;
16 }
17
18 body {
19 background-color: #000
;
20 }
21
22 #slider {
23 width: 1200px;
24 height: 460px;
25 margin: 100px auto;
26 position: relative;
27 /*background-color: red;*/
28 }
29
30 #slider li {
31 position: absolute;
32 left: 200px;
33 top: 0
;
34 }
35
36 #slider li img {
37 width: 100%
;
38 height: 100%
;
39 }
40
41 .slider_ctl_prev, .slider_ctl_next {
42 width: 76px;
43 height: 112px;
44 position: absolute;
45 top: 50%
;
46 margin-top: -
56px;
47 z-index: 99
;
48 }
49
50 #slider_ctl {
51 opacity: 0
;
52 }
53
54 .slider_ctl_prev {
55 background: url("images/prev.png") no-
repeat;
56 left: 0
;
57 }
58
59 .slider_ctl_next {
60 background: url("images/next.png") no-
repeat;
61 right: 0
;
62 }
63 </style>
64 </head>
65 <body>
66 <div id="slider">
67 <ul id="slider_main">
68 <li><img src="images/slidepic1.jpg" alt=""></li>
69 <li><img src="images/slidepic2.jpg" alt=""></li>
70 <li><img src="images/slidepic3.jpg" alt=""></li>
71 <li><img src="images/slidepic4.jpg" alt=""></li>
72 <li><img src="images/slidepic5.jpg" alt=""></li>
73 </ul>
74 <div id="slider_ctl">
75 <span class="slider_ctl_prev"></span>
76 <span class="slider_ctl_next"></span>
77 </div>
78 </div>
79 <script src="js/MyTool.js"></script>
80 <script>
81 window.addEventListener('load',
function (ev) {
82 // 1. 获取需要的标签
83 var slider = myTool.$('slider'
);
84 var sliderMain = myTool.$('slider_main'
);
85 var allLis =
sliderMain.children;
86 var sliderCtl = myTool.$('slider_ctl'
);
87
88 // 2. 位置信息
89 var jsonArr =
[
90 {width:400, top:20, left:50, opacity:0.2, zIndex:2
},
91 {width:600, top:70, left:0, opacity:0.8, zIndex:3
},
92 {width:800, top:100, left:200, opacity:1, zIndex:4
},
93 {width:600, top:70, left:600, opacity:0.8, zIndex:3
},
94 {width:400, top:20, left:750, opacity:0.2, zIndex:2
}
95 ];
96
97 for (
var i = 0; i < jsonArr.length; i++
) {
98 myTool.buffer(allLis[i], jsonArr[i]);
99 }
100
101 // 3. 显示和隐藏
102 slider.addEventListener('mouseover',
function () {
103 myTool.buffer(sliderCtl, {'opacity': 1
});
104 });
105
106 slider.addEventListener('mouseout',
function () {
107 myTool.buffer(sliderCtl, {'opacity': 0
});
108 });
109
110 // 4. 监听点击
111 for (
var j = 0; j < sliderCtl.children.length; j++
) {
112 var item =
sliderCtl.children[j];
113 item.addEventListener('click',
function () {
114 if(
this.className === 'slider_ctl_prev'){
// 左边
115 jsonArr.push(jsonArr.shift());
116 }
else {
117 jsonArr.unshift(jsonArr.pop());
118 }
119
120 // 重新布局
121 for (
var i = 0; i < jsonArr.length; i++
) {
122 myTool.buffer(allLis[i], jsonArr[i]);
123 }
124 })
125 }
126 })
127 </script>
128 </body>
129 </html>
jsonArr.shift()获取第一个json里的内容
jsonArr.pop()获取最后一个json里的内容
1 (
function (w) {
2 w.myTool =
{
3 $:
function (id) {
4 return typeof id === 'string' ? document.getElementById(id) :
null;
5 },
6 hasClassName:
function (obj, cs) {
7 var reg =
new RegExp('\\b' + cs + '\\b'
);
8 return reg.test(obj.className);
9 },
10 addClassName:
function (obj, cs) {
11 if (!
this.hasClassName(obj, cs)) {
12 obj.className += ' ' +
cs;
13 }
14 },
15 removeClassName:
function (obj, cs) {
16 var reg =
new RegExp('\\b' + cs + '\\b'
);
17 // 删除class
18 obj.className = obj.className.replace(reg, ''
);
19 },
20 toggleClassName:
function (obj, cs) {
21 if (
this.hasClassName(obj, cs)) {
22 // 有， 删除
23 this.removeClassName(obj, cs);
24 }
else {
25 // 没有，则添加
26 this.addClassName(obj, cs);
27 }
28 },
29 scroll:
function () {
30 if (window.pageYOffset !==
null) {
// 最新的浏览器
31 return {
32 "top"
: window.pageYOffset,
33 "left"
: window.pageXOffset
34 }
35 }
else if (document.compatMode === 'CSS1Compat') {
// W3C
36 return {
37 "top"
: document.documentElement.scrollTop,
38 "left"
: document.documentElement.scrollLeft
39 }
40 }
41 return {
42 "top"
: document.body.scrollTop,
43 "left"
: document.body.scrollLeft
44 }
45 },
46 client:
function () {
47 if (window.innerWidth) {
// ie9+ 最新的浏览器
48 return {
49 width: window.innerWidth,
50 height: window.innerHeight
51 }
52 }
else if (document.compatMode === "CSS1Compat") {
// W3C
53 return {
54 width: document.documentElement.clientWidth,
55 height: document.documentElement.clientHeight
56 }
57 }
58 return {
59 width: document.body.clientWidth,
60 height: document.body.clientHeight
61 }
62 },
63 getStyleAttr:
function (obj, attr) {
64 if (obj.currentStyle) {
// IE 和 opera
65 return obj.currentStyle[attr];
66 }
else {
67 return window.getComputedStyle(obj,
null)[attr];
68 }
69 },
70 changeCssStyle:
function (eleObj, attr, value) {
71 eleObj.style[attr] =
value;
72 },
73 buffer:
function (eleObj, json, fn) {
74 // 1.1 先清后设
75 clearInterval(eleObj.timer);
76 // 1.2 定义变量
77 var speed = 0, begin = 0, target = 0, flag =
false;
78 // 1.3 设置定时器
79 eleObj.timer = setInterval(
function () {
80 // 标志 (标签的所有属性有没有执行完动画)
81 flag =
true;
82 for (
var key
in json) {
83 if (json.hasOwnProperty(key)) {
84 // 获取要做动画属性的初始值
85 if (key === 'opacity'
) {
86 begin = parseInt(parseFloat(myTool.getStyleAttr(eleObj, key)) * 100
);
87 target = parseInt(json[key] * 100
);
88 }
else if ('scrollTop' === key) {
// 滚动
89 begin =
Math.ceil(Number(eleObj.scrollTop));
90 target =
parseInt(json[key]);
91 }
else {
92 begin = parseInt(myTool.getStyleAttr(eleObj, key)) || 0
;
93 target =
parseInt(json[key]);
94 }
95
96 // 2.3 求出步长
97 speed = (target - begin) * 0.2
;
98 speed = (target > begin) ?
Math.ceil(speed) : Math.floor(speed);
99
100 // 2.4 动起来
101 if (key === 'opacity'
) {
102 eleObj.style.opacity = (begin + speed) / 100
;
103 }
else if ('scrollTop' === key) {
// 滚动
104 eleObj.scrollTop = begin +
speed;
105 }
else if ("zIndex" ===
key) {
106 eleObj.style[key] =
json[key];
107 }
else {
108 eleObj.style[key] = begin + speed + 'px'
;
109 }
110
111 // 2.5 判断
112 if (begin !==
target) {
113 flag =
false;
114 }
115 }
116 }
117 // 1.4 清除定时器
118 if (flag) {
119 clearInterval(eleObj.timer);
120 // 开启另一组动画
121 /* if(fn){
122 fn();
123 }*/
124 fn &&
fn();
125 }
126 }, 40
);
127 }
128 };
129 })(window);
转载于:https://www.cnblogs.com/zhangzhengyang/p/11217497.html
