请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站
商盟中心,专业代发货平台-品牌推广 技盟中心,业界新闻-IT人物-SEO-网站运营 微盟中心,微城市-微话题-网赚中心 乐盟中心,为快乐生活-快乐工作加分

聚盟论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 1841|回复: 1

一个非常简单的JS幻灯、图片切换轮播代码

[复制链接]

244

主题

5

听众

1978

积分
     

管理员

Rank: 12Rank: 12Rank: 12

  • TA的每日心情
    开心
    2015-11-18 08:08
  • 签到天数: 162 天

    [LV.7]常住居民III

    UID
    3
    帖子
    490
    威望
    0
    在线时间
    371 小时
    注册时间
    2011-9-15
    发表于 2011-12-20 20:31:18 |显示全部楼层
    随手记-天天记帐本 邀请达人
    一个非常简单的JS幻灯、图片切换轮播代码。也就是大家经常见到的JS图片切换特效,我做的第一个JS组件,纯JavaScript实现的,没有借用jQuery,是去年底写的. 现在看看, 代码结构混乱, 所谓颗粒化基本没有,纯为练习之作, 然望大家多多指点。

      演示:
    1. <!Doctype HTML>
    2. <html>
    3. <head>
    4. <title>slider</title>
    5. <script type="text/javascript">
    6. function e(p,ele) {return p.getElementsByTagName(ele)};
    7. function el(id) {return document.getElementById(id)};
    8. function t(o,e,f) {o.addEventListener?o.addEventListener(e,f,false):o.attachEvent('on'+e,f)};
    9. var ss = {};
    10. ss.slider = function() {
    11. var arg, move = function() {};
    12. move.prototype.init = function(opt) {
    13. arg = this.set(opt);
    14. var wrap = el(opt.gallery),
    15. ctl = el(opt.control),
    16. obj = this.obj = e(wrap,'ul')[0],
    17. $this = this;
    18. this.u = e(obj,'li');
    19. this.cu = e(ctl,'li');
    20. this.uW = this.u[0].offsetWidth;
    21. this.uH = this.u[0].offsetHeight;
    22. this.len = this.u.length;
    23. this.old = this.cur = arg.index;
    24. wrap.style.cssText = 'width:' + this.uW + 'px;' + 'height:' + this.uH + 'px;' + 'overflow: hidden;';
    25. obj.style.cssText = 'height:' + this.uH + 'px;' + 'width:' + (arg.dir ? this.uW + 'px;' : this.len * this.uW + 'px;') + (arg.dir ? 'top:' + -1 * this.cur * this.uH + 'px;' : 'left:' + -1 * this.cur * this.uW + 'px;');
    26. this.cu[this.cur].className = 'current';
    27. this.event(arg.type);
    28. setTimeout(function() {$this.auto()},arg.interval);
    29. };
    30. move.prototype.set = function(opt) {
    31. org = {
    32. gallery: 'gal-wrap',
    33. control: "gal-panel",
    34. dir: false,
    35. index: 0,
    36. speed: 16,
    37. interval: 3000,
    38. type: 'click'
    39. };
    40. for(var p in opt) {
    41. org[p] = opt[p]
    42. }
    43. return org;
    44. };
    45. move.prototype.timeMgr = function() {
    46. var $this = this;
    47. this.m = setTimeout(function() {$this.auto(); $this.indexMgr()},arg.interval);
    48. };
    49. move.prototype.auto = function() {
    50. var $this = this;
    51. if(this.a != undefined) clearInterval(this.a);
    52. this.a = setInterval(function() {$this.pos()},arg.speed);
    53. };
    54. // Downloads By http://www.veryhuo.com/down
    55. move.prototype.pos = function() {
    56. var dir = arg.dir ? parseInt(this.obj.style.top) : parseInt(this.obj.style.left),
    57. area = arg.dir ? this.uH : this.uW,
    58. dis = (area * this.cur + dir) * .1,
    59. step = dis >= 0 ? Math.ceil(dis) : Math.floor(dis);
    60. arg.dir ? this.obj.style.top = dir - step + 'px' : this.obj.style.left = dir - step + 'px';
    61. this.stop(dir,area);
    62. };
    63. move.prototype.stop = function(dir,area) {
    64. if(Math.abs(dir) == area * this.cur) {
    65. clearInterval(this.a);
    66. this.cur == this.len - 1 ? this.cur = 0 : this.cur++;
    67. this.timeMgr();
    68. }
    69. };
    70. move.prototype.indexMgr = function() {
    71. this.cu[this.cur].className = 'current';
    72. if(this.old != this.cur) {
    73. this.cu[this.old].className = '';
    74. this.old = this.cur;
    75. }
    76. };
    77. move.prototype.event = function(e) {
    78. for(var i = 0; i < this.cu.length; i++) {
    79. var $this = this;
    80. t(this.cu[i],e,num(i,$this));
    81. }
    82. function num(n,$this) {
    83. return function() {
    84. clearInterval($this.a);
    85. clearTimeout($this.m);
    86. $this.cu[n].className = 'current';
    87. if($this.old != n) {
    88. $this.cu[$this.old].className = '';
    89. $this.old = $this.cur = n;
    90. }
    91. $this.c = 0;
    92. $this.auto();
    93. }
    94. }
    95. };
    96. return move;
    97. }();
    98. </script>
    99. <style type="text/css">
    100. * {margin: 0; padding: 0;}
    101. body {padding: 0 0 50px 50px;}
    102. #gal-wrap {
    103. position: relative;
    104. }
    105. #gallery {
    106. position: absolute;
    107. }
    108. #gallery li {
    109. list-style: none;
    110. float: left;
    111. width: 450px;
    112. height: 350px;
    113. }
    114. #gallery p {
    115. text-align: center;
    116. color: #cdcdcd;
    117. }
    118. #gal-panel {
    119. height: 100%;
    120. overflow: hidden;
    121. }
    122. #gal-panel li {
    123. float: left;
    124. margin-right: 6px;
    125. list-style: none;
    126. cursor: pointer;
    127. }
    128. #gal-panel li.current {
    129. font-weight: bold;
    130. color: red;
    131. }
    132. </style>
    133. </head>
    134. <body>
    135. <div id="gal-wrap">
    136. <ul id="gallery">
    137. <li><p><img src="/uploads/common/images/p7.jpg" /></p></li>
    138. <li><p><img src="/uploads/common/images/p5.jpg" /></p></li>
    139. <li><p><img src="/uploads/common/images/p3.jpg" /></p></li>
    140. <li><p><img src="/uploads/common/images/p4.jpg" /></p></li>
    141. </ul>
    142. </div>
    143. <div id="gal-panel">
    144. <ul id="gallery-panel">
    145. <li>1</li>
    146. <li>2</li>
    147. <li>3</li>
    148. <li>4</li>
    149. </ul>
    150. </div>
    151. <script type="text/javascript">
    152. var tt = new ss.slider();
    153. tt.init({
    154. gallery: 'gal-wrap',
    155. control: "gal-panel",
    156. dir: false,
    157. index: 0,
    158. speed: 20,
    159. interval: 1000,
    160. type: 'mouseover'
    161. });
    162. </script>
    163. </body>
    164. </html> <br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
    复制代码
    善于思考,善于分享,天天使自己有点小小进步!
    回复

    使用道具 举报

    1

    主题

    0

    听众

    231

    积分

    江湖小虾

    Rank: 3Rank: 3

  • TA的每日心情
    开心
    2013-5-15 19:02
  • 签到天数: 37 天

    [LV.5]常住居民I

    UID
    11826
    帖子
    39
    威望
    0
    在线时间
    216 小时
    注册时间
    2013-1-20
    发表于 2013-3-10 11:59:13 |显示全部楼层
    随手记-天天记帐本 邀请达人
    支持~~支持~~
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    聚盟首页|聚盟论坛|站长联盟|手机版|Archiver|网站地图|聚盟论坛 ( 粤ICP备10088885号 )   

    GMT+8, 2017-3-28 04:45 , Processed in 0.152547 second(s), 30 queries .

    Powered by Discuz! X2.5

    © 2001-2012 Comsenz Inc.

    回顶部