(新手)刚入职，好久没写原生，正好有个同学需要写一个大图滚动，顺手拿来写写练练手。

博客申请后一直没有动笔，一方面是自己也是刚接触这行业不久，技术还不够，写出的东西水平都比较低。一方面也没敲了多少代码，没货放上来。如题，自从学了jQuery之后，真的好久没有用原生JS敲过代码了，有些都有点不熟练了。正好今天练练手。刚好目前工作搞定了，可以安下心下写东西了。快一个月的时间，接触了一些实际开发的代码，又学到了好多。在学校学到的东西真的太少，只是稍微入门而已，越学发现自己越渺小，好好加油，在这大城市里又是IT行业不进步就是退步啊。不多说了，直接贴代码了，这份代码比较浅，采用的是滚动条的形式实现的滚动。所以布局时要注意了。

 1  1 /** feiyu **/
 2  2 /** 功能：大图滚动（滚动条方式） **/
 3  3 /** 参数：
 4  4         parID-超出隐藏的ID;
 5  5         childID-滚动图父级ID;
 6  6         width-滚动图宽度
 7  7 **/
 8  8 /** 实例：new roll(parID, childID, width) **/
 9  9 (function(exports) {
10 10     function roll(parID, childID, width) {
11 11         this.$box = document.getElementById(parID);
12 12         this.$con = document.getElementById(childID);
13 13         this.$imgs = this.$con.children;
14 14         this.startVal = this.$box.scrollLeft;
15 15         this.times = null;
16 16         this.imgNum = 0;
17 17         this.speed = 7;
18 18         this.width = width;
19 19         this.init();
20 20     };
21 21     roll.prototype.init = function() {
22 22         var _this = this;
23 23         setTimeout(function() {
24 24             _this.imgSco();
25 25         }, 2000);
26 26     };
27 27 
28 28     roll.prototype.imgSco = function() {
29 29         this.imgNum++;
30 30         if (this.imgNum == this.$imgs.length - 1) {
31 31             this.imgNum = 0;
32 32         }
33 33         this.startMove(this.imgNum * this.width);
34 34     };
35 35 
36 36     roll.prototype.startMove = function(moveL) {
37 37         var _this = this;
38 38         var moveL = moveL;
39 39         this.times = setInterval(function() {
40 40             _this.timeMove(moveL);
41 41         }, 10);
42 42         
43 43     };
44 44 
45 45     roll.prototype.timeMove = function(moveL) {
46 46         var _this = this;
47 47         if (this.startVal < moveL) {
48 48             this.startVal += this.speed;
49 49             if (this.startVal >= moveL) {
50 50                 this.startVal = moveL;
51 51                 setTimeout(function() {
52 52                   _this.imgSco();  
53 53                 }, 2000);
54 54                 clearInterval(this.times);
55 55             }
56 56         } else if (this.startVal > moveL) {
57 57            this.startVal -= this.speed;
58 58             if (this.startVal<= moveL) {
59 59                 this.startVal = moveL;
60 60                 setTimeout(function() {
61 61                   _this.imgSco();  
62 62                 }, 2000);
63 63                 clearInterval(this.times);
64 64             }
65 65         }
66 66         this.$box.scrollLeft = this.startVal;
67 67      }
68 68 
69 69     exports.roll = roll;
70 70 })(window)

 发现一个一个传参数有点low，修改了传参的方法 采用的了对象的方式传递进来

/** feiyu **/
/** 功能：大图滚动（滚动条方式） **/
/** 参数：
        parID-超出隐藏的ID;
        childID-滚动图父级ID;
        width-滚动图宽度
**/
/** 实例：new roll({
            parID: "wrap",
            rollID: "con",
            width: 400,
            speed: 7,
            rollNum: 2,
            stopTime: 1000
        }); **/
(function(exports) {
    function roll(obj) {
        this.$box = document.getElementById(obj.parID) || document.getElementById("wrap");
        this.$con = document.getElementById(obj.rollID) || document.getElementById('con');
        this.$imgs = this.$con.children;
        this.startVal = this.$box.scrollLeft;
        this.times = null; //计时器
        this.imgNum = 0;
        this.rollNum = obj.rollNum || 1;//滚动图片的个数，默认为1(只能是偶数)
        this.speed = obj.speed || 7;//滚动的速度，默认为7
        this.width = obj.width || 400;//滚动的距离，默认为400
        this.stopTime = obj.stopTime || 2000;//停止的时间
        this.init();
    };
    
    roll.prototype.init = function() {
        var _this = this;
        setTimeout(function() {
            _this.imgSco();
        }, this.stopTime);
    };

    roll.prototype.imgSco = function() {
        this.imgNum+=this.rollNum;
        if (this.imgNum >= this.$imgs.length) {
            if (this.imgNum == this.$imgs.length - 1) {
                this.imgNum++;
            } else {
                this.imgNum = 0;
            }
        }
        this.startMove(this.imgNum * this.width);
    };

    roll.prototype.startMove = function(moveL) {
        var _this = this;
        var moveL = moveL;
        this.times = setInterval(function() {
            _this.timeMove(moveL);
        }, 10);
    };

    roll.prototype.timeMove = function(moveL) {
        var _this = this;
        if (this.startVal < moveL) {
            this.startVal += this.speed;
            if (this.startVal >= moveL) {
                this.startVal = moveL;
                setTimeout(function() {
                  _this.imgSco();  
                }, this.stopTime);
                clearInterval(this.times);
            }
        } else if (this.startVal > moveL) {
           this.startVal -= this.speed;
            if (this.startVal<= moveL) {
                this.startVal = moveL;
                setTimeout(function() {
                  _this.imgSco();  
                }, this.stopTime);
                clearInterval(this.times);
            }
        }
        this.$box.scrollLeft = this.startVal;
    }

    exports.roll = roll;
})(window)

 

　　顺便把demo贴出来

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>大图滚动</title>
 6     <link rel="stylesheet" href="reset.css">
 7     <style>
 8         .wrap {
 9             overflow: hidden;
10             width: 800px;
11         }
12         .con {
13             width: 2800px;
14         }
15         .con div{
16             float: left;
17             width: 400px;
18             height: 400px;
19         }
20         .con div:nth-child(1) {
21             background: #000;
22         }
23         .con div:nth-child(2) {
24             background: #333;
25         }
26         .con div:nth-child(3) {
27             background: #666;
28         }
29         .con div:nth-child(4) {
30             background: #999;
31         }
32         .con div:nth-child(5) {
33             background: #aaa;
34         }
35         .con div:nth-child(6) {
36             background: #ddd;
37         }
38         .con div:nth-child(7) {
39             background: #39f;
40         }
41     </style>
42 </head>
43 <body>
44     <div class="wrap" id="wrap">
45         <div class="con clearfix" id="con">
46             <div>1</div>
47             <div>2</div>
48             <div>3</div>
49             <div>4</div>
50             <div>5</div>
51             <div>6</div>
52             <div>7</div>
53         </div>
54     </div>
55     <script src="lj_roll.js"></script>
56     <script>
57         new roll({
58             parID: "wrap",
59             rollID: "con",
60             width: 400,
61             speed: 7,
62             rollNum: 2,
63             stopTime: 1000
64         });
65     </script>
66 </body>
67 </html>

 又修改了一下，换汤不换药，只是看起来让自己更舒服一点

 1 /** feiyu **/
 2 /** 功能：大图滚动（滚动条方式） **/
 3 /** 参数：
 4         parID-超出隐藏的ID;
 5         childID-滚动图父级ID;
 6         width-滚动图宽度
 7 **/
 8 /** 实例：new roll({
 9             parID: "wrap",
10             rollID: "con",
11             width: 400,
12             speed: 7,
13             rollNum: 2,
14             stopTime: 1000
15         }); **/
16 (function(exports) {
17     function roll(obj) {
18         this.$box = document.getElementById(obj.parID) || document.getElementById("wrap");
19         this.$con = document.getElementById(obj.rollID) || document.getElementById('con');
20         this.$imgs = this.$con.children;
21         this.startVal = this.$box.scrollLeft;
22         this.times = null; //计时器
23         this.imgNum = 0;
24         this.rollNum = obj.rollNum || 1;//滚动图片的个数，默认为1(只能是偶数)
25         this.speed = obj.speed || 7;//滚动的速度，默认为7
26         this.width = obj.width || 400;//滚动的距离，默认为400
27         this.stopTime = obj.stopTime || 2000;//停止的时间
28         this.init();
29     };
30     
31     roll.prototype = {
32         constructor: "roll",
33 
34         init: function() {
35             var _this = this;
36             setTimeout(function() {
37                 _this.imgSco();
38             }, this.stopTime);
39         },
40 
41         imgSco: function() {
42             this.imgNum += this.rollNum;
43             if (this.imgNum >= this.$imgs.length) {
44                 if (this.imgNum == this.$imgs.length - 1) {
45                     this.imgNum++;
46                 } else {
47                     this.imgNum = 0;
48                 }
49             }
50             this.startMove(this.imgNum * this.width);
51         },
52 
53         startMove: function(moveL) {
54             var _this = this;
55             var moveL = moveL;
56             this.times = setInterval(function() {
57                 _this.timeMove(moveL);
58             }, 10);  
59         },
60 
61         timeMove: function(moveL) {
62             var _this = this;
63             if (this.startVal < moveL) {
64                 this.startVal += this.speed;
65                 if (this.startVal >= moveL) {
66                     this.startVal = moveL;
67                     setTimeout(function() {
68                       _this.imgSco();  
69                     }, this.stopTime);
70                     clearInterval(this.times);
71                 }
72             } else if (this.startVal > moveL) {
73                this.startVal -= this.speed;
74                 if (this.startVal<= moveL) {
75                     this.startVal = moveL;
76                     setTimeout(function() {
77                       _this.imgSco();  
78                     }, this.stopTime);
79                     clearInterval(this.times);
80                 }
81             }
82             this.$box.scrollLeft = this.startVal;
83         }
84     }
85     exports.roll = roll;
86 })(window)

 

posted @ 2016-08-05 13:05  飞羽orz  阅读(635)  评论(1)    收藏  举报