[js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图 - Web

TOP

[js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图(二)

2017-10-16 18:19:15 【大中小】浏览:7612次

oBtn.onclick = function(){ 16 timer = setInterval( function(){ 17 speed = ( 500 - oBox.offsetLeft ) / 8; 18 if( speed > 0 ) { 19 speed = Math.ceil( speed ); 20 } 21 oBox.style.left = oBox.offsetLeft + speed + 'px'; 22 }, 30 ); 23 } 24 } 25 // ]]></script> 26 </head> 27 <body> 28 <input type="button" value="动起来"> 29 <div id="box"></div> 30 </body>

最后目标停在503.5px，速度这个时候是负值，最后速度停在-0.5，对于反方向的速度，我们就要把它变成-1，才能到达目标，所以用向下取整（Math.floor）

 1 oBtn.onclick = function(){
 2     timer = setInterval( function(){
 3         speed = ( 500 - oBox.offsetLeft ) / 8;
 4         if( speed > 0 ) {
 5             speed = Math.ceil( speed );
 6         }else {
 7             speed = Math.floor( speed );
 8         }
 9         console.log( speed, oBox.offsetLeft );
10         oBox.style.left = oBox.offsetLeft + speed + 'px';
11     }, 30 );
12 }

然后我们把这个缓冲运动整合到匀速运动框架，就变成：

 1 function css(obj, attr, value) {
 2     if (arguments.length == 3) {
 3         obj.style[attr] = value;
 4     } else {
 5         if (obj.currentStyle) {
 6             return obj.currentStyle[attr];
 7         } else {
 8             return getComputedStyle(obj, false)[attr];
 9         }
10     }
11 }
12 
13 function animate(obj, attr, fn) {
14     clearInterval(obj.timer);
15     var cur = 0;
16     var target = 0;
17     var speed = 0;
18     obj.timer = setInterval(function () {
19         var bFlag = true;
20         for (var key in attr) {
21             if (key == 'opacity ') {
22                 cur = css(obj, 'opacity') * 100;
23             } else {
24                 cur = parseInt(css(obj, key));
25             }
26             target = attr[key];
27             speed = ( target - cur ) / 8;
28             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
29             if (cur != target) {
30                 bFlag = false;
31                 if (key == 'opacity') {
32                     obj.style.opacity = ( cur + speed ) / 100;
33                     obj.style.filter = "alpha(opacity:" + ( cur + speed ) + ")";
34                 } else {
35                     obj.style[key] = cur + speed + "px";
36                 }
37             }
38         }
39         if (bFlag) {
40             clearInterval(obj.timer);
41             fn && fn.call(obj);
42         }
43     }, 30 );
44 }

有了这匀速运动框架，我们就来做幻灯片：

上下幻灯片的html样式文件：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>slide - by ghostwu</title>
 6     <link rel="stylesheet" href="css/slide3.css">
 7     <script src="js/animate.js"></script>
 8     <script src="js/slide.js"></script>
 9 </head>
10 <body>
11 <div id="slide">
12     <div id="slide-img">
13         <div id="img-container">
14             <img src="./img/1.jpg" alt="" style="opacity:1;">
15             <img src="./img/2.jpg" alt="">
16             <img src="./img/3.jpg" alt="">
17             <img src="./img/4.jpg" alt="">
18             <img src="./img/5.jpg" alt="">
19         </div>
20     </div>
21     <div id="slide-nums">
22         <ul>
23             <li class="active"></li>
24             <li></li>
25             <li></li>
26             <li></li>
27             <li></li>
28         </ul>
29     &

首页上一页 1 2 3 4 下一页尾页 2/4/4
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：WEB前端JS与UI框架	下一篇：【css】css2实现两列三列布局的方..