你的位置:首页 > Java教程

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


博客申请后一直没有动笔,一方面是自己也是刚接触这行业不久,技术还不够,写出的东西水平都比较低。一方面也没敲了多少代码,没货放上来。如题,自从学了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)