jsコントロール画像が巡回表示されます.

44205 ワード
js。 コントロール画像 巡回表示 

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html> 
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
   
   
   
   
  3. <head> 
    4. 
   
   
   
   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    5. 
   
   
   
   
  5. <title>JavaScript         </title> 
    6. 
   
   
   
   
  6. <script src="SlideTrans.js"></script> 
    7. 
   
   
   
   
  7. </head> 
    8. 
   
   
   
   
  8. <body> 
    9. 
   
   
   
   
  9. <style type="text/css">   
    10. 
   
   
   
   
  10. .container, .container img{width:280px; height:200px;}  
    11. 
   
   
   
   
  11. .container img{border:0;vertical-align:top;}  
    12. 
   
   
   
   
  12. </style> 
    13. 
   
   
   
   
  13. <div class="container" id="idContainer"> 
    14. 
   
   
   
   
  14.     <table id="idSlider" border="0" cellpadding="0" cellspacing="0"> 
    15. 
   
   
   
   
  15.         <tr> 
    16. 
   
   
   
   
  16.             <td><a href="http://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html"><img src="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_rt_3.jpg"/></a></td> 
    17. 
   
   
   
   
  17.             <td><a href="http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html"><img src="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_rt_4.jpg"/></a></td> 
    18. 
   
   
   
   
  18.             <td><a href="http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html"><img src="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_rt_5.jpg"/></a></td> 
    19. 
   
   
   
   
  19.         </tr> 
    20. 
   
   
   
   
  20.     </table> 
    21. 
   
   
   
   
  21. </div> 
    22. 
   
   
   
   
  22. <script> 
    23. 
   
   
   
   
  23. new SlideTrans("idContainer", "idSlider", 3, { Vertical: false }).Run();  
    24. 
   
   
   
   
  24. </script> 
    25. 
   
   
   
   
  25. <br /> 
    26. 
   
   
   
   
  26. <style type="text/css"> 
    27. 
   
   
   
   
  27. .container ul, .container li{list-style:none;margin:0;padding:0;}  
    28. 
   
   
   
   
  28.  
    29. 
   
   
   
   
  29. .num{ position:absolute; right:5px; bottom:5px; font:12px/1.5 tahoma, arial; height:18px;}  
    30. 
   
   
   
   
  30. .num li{  
    31. 
   
   
   
   
  31.     float: left;  
    32. 
   
   
   
   
  32.     color: #d94b01;  
    33. 
   
   
   
   
  33.     text-align: center;  
    34. 
   
   
   
   
  34.     line-height: 16px;  
    35. 
   
   
   
   
  35.     width: 16px;  
    36. 
   
   
   
   
  36.     height: 16px;  
    37. 
   
   
   
   
  37.     font-family: Arial;  
    38. 
   
   
   
   
  38.     font-size: 11px;  
    39. 
   
   
   
   
  39.     cursor: pointer;  
    40. 
   
   
   
   
  40.     margin-left: 3px;  
    41. 
   
   
   
   
  41.     border: 1px solid #f47500;  
    42. 
   
   
   
   
  42.     background-color: #fcf2cf;  
    43. 
   
   
   
   
  43. }  
    44. 
   
   
   
   
  44. .num li.on{  
    45. 
   
   
   
   
  45.     line-height: 18px;  
    46. 
   
   
   
   
  46.     width: 18px;  
    47. 
   
   
   
   
  47.     height: 18px;  
    48. 
   
   
   
   
  48.     font-size: 14px;  
    49. 
   
   
   
   
  49.     margin-top:-2px;  
    50. 
   
   
   
   
  50.     background-color: #ff9415;  
    51. 
   
   
   
   
  51.     font-weight: bold;  
    52. 
   
   
   
   
  52.     color:#FFF;  
    53. 
   
   
   
   
  53. }  
    54. 
   
   
   
   
  54. </style> 
    55. 
   
   
   
   
  55.    /alibaba    ：  
    56. 
   
   
   
   
  56. <div class="container" id="idContainer2"> 
    57. 
   
   
   
   
  57.     <ul id="idSlider2"> 
    58. 
   
   
   
   
  58.         <li><a href="http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html"> <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song1.jpg" alt="      " /> </a></li> 
    59. 
   
   
   
   
  59.         <li><a href="http://www.cnblogs.com/cloudgamer/archive/2009/08/10/FixedMenu.html"> <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song2.jpg" alt="      " /> </a></li> 
    60. 
   
   
   
   
  60.         <li><a href="http://www.cnblogs.com/cloudgamer/archive/2009/07/07/FixedTips.html"> <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song3.jpg" alt="      " /> </a></li> 
    61. 
   
   
   
   
  61.         <li><a href="http://www.cnblogs.com/cloudgamer/archive/2010/02/01/LazyLoad.html"> <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song4.jpg" alt="      " /> </a></li> 
    62. 
   
   
   
   
  62.         <li><a href="http://www.cnblogs.com/cloudgamer/archive/2009/12/01/Quick_Upload.html"> <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song5.jpg" alt="      " /> </a></li> 
    63. 
   
   
   
   
  63.     </ul> 
    64. 
   
   
   
   
  64.     <ul class="num" id="idNum"> 
    65. 
   
   
   
   
  65.     </ul> 
    66. 
   
   
   
   
  66. </div> 
    67. 
   
   
   
   
  67. <br /> 
    68. 
   
   
   
   
  68. <div> 
    69. 
   
   
   
   
  69.     <input id="idAuto" type="button" value="  " /> 
    70. 
   
   
   
   
  70.     <input id="idPre" type="button" value="&lt;&lt;" /> 
    71. 
   
   
   
   
  71.     <input id="idNext" type="button" value="&gt;&gt;" /> 
    72. 
   
   
   
   
  72.     <select id="idTween"> 
    73. 
   
   
   
   
  73.         <option value="0">    </option> 
    74. 
   
   
   
   
  74.         <option value="1">  1</option> 
    75. 
   
   
   
   
  75.         <option value="2">  2</option> 
    76. 
   
   
   
   
  76.     </select> 
    77. 
   
   
   
   
  77. </div> 
    78. 
   
   
   
   
  78. <script> 
    79. 
   
   
   
   
  79.  
    80. 
   
   
   
   
  80. var nums = [], timer, n = $$("idSlider2").getElementsByTagName("li").length,  
    81. 
   
   
   
   
  81.     st = new SlideTrans("idContainer2", "idSlider2", n, {  
    82. 
   
   
   
   
  82.         onStart: function(){//        
    83. 
   
   
   
   
  83.             forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; })  
    84. 
   
   
   
   
  84.         }  
    85. 
   
   
   
   
  85.     });  
    86. 
   
   
   
   
  86. for(var i = 1; i <= n; AddNum(i++)){};  
    87. 
   
   
   
   
  87. function AddNum(i){  
    88. 
   
   
   
   
  88.     var num = $$("idNum").appendChild(document.createElement("li"));  
    89. 
   
   
   
   
  89.     num.innerHTML = i--;  
    90. 
   
   
   
   
  90.     num.onmouseover = function(){  
    91. 
   
   
   
   
  91.         timer = setTimeout(function(){ num.className = "on"; st.Auto = false; st.Run(i); }, 200);  
    92. 
   
   
   
   
  92.     }  
    93. 
   
   
   
   
  93.     num.onmouseout = function(){ clearTimeout(timer); num.className = ""; st.Auto = true; st.Run(); }  
    94. 
   
   
   
   
  94.     nums[i] = num;  
    95. 
   
   
   
   
  95. }  
    96. 
   
   
   
   
  96. st.Run();  
    97. 
   
   
   
   
  97.  
    98. 
   
   
   
   
  98.  
    99. 
   
   
   
   
  99. $$("idAuto").onclick = function(){  
    100. 
   
   
   
   
  100.     if(st.Auto){  
    101. 
   
   
   
   
  101.         st.Auto = false; st.Stop(); this.value = "  ";  
    102. 
   
   
   
   
  102.     }else{  
    103. 
   
   
   
   
  103.         st.Auto = true; st.Run(); this.value = "  ";  
    104. 
   
   
   
   
  104.     }  
    105. 
   
   
   
   
  105. }  
    106. 
   
   
   
   
  106. $$("idNext").onclick = function(){ st.Next(); }  
    107. 
   
   
   
   
  107. $$("idPre").onclick = function(){ st.Previous(); }  
    108. 
   
   
   
   
  108. $$("idTween").onchange = function(){  
    109. 
   
   
   
   
  109.     switch (parseInt(this.value)){  
    110. 
   
   
   
   
  110.         case 2 :  
    111. 
   
   
   
   
  111.             st.Tween = Tween.Bounce.easeOut; break;  
    112. 
   
   
   
   
  112.         case 1 :  
    113. 
   
   
   
   
  113.             st.Tween = Tween.Back.easeOut; break;  
    114. 
   
   
   
   
  114.         default :  
    115. 
   
   
   
   
  115.             st.Tween = Tween.Quart.easeOut;  
    116. 
   
   
   
   
  116.     }  
    117. 
   
   
   
   
  117. }  
    118. 
   
   
   
   
  118.  
    119. 
   
   
   
   
  119. </script> 
    120. 
   
   
   
   
  120.  
    121. 
   
   
   
   
  121. <br /> 
    122. 
   
   
   
   
  122. <script type="text/javascript"><!--  
    123. 
   
   
   
   
  123. google_ad_client = "ca-pub-0342339836871729";  
    124. 
   
   
   
   
  124. /* 728x90,     10-1-26 */  
    125. 
   
   
   
   
  125. google_ad_slot = "8648094726";  
    126. 
   
   
   
   
  126. google_ad_width = 728;  
    127. 
   
   
   
   
  127. google_ad_height = 90;  
    128. 
   
   
   
   
  128. //--> 
    129. 
   
   
   
   
  129. </script> 
    130. 
   
   
   
   
  130. <script type="text/javascript" 
    131. 
   
   
   
   
  131. src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
    132. 
   
   
   
   
  132. </script> 
    133. 
   
   
   
   
  133. </body> 
    134. 
   
   
   
   
  134. </html> 
    135.
js制御ファイルを導入する:

  
  
  
  
    
   
   
   
   
  1. /*!  
    2. 
   
   
   
   
  2.  * SlideTrans  
    3. 
   
   
   
   
  3.  * Copyright (c) 2010 cloudgamer  
    4. 
   
   
   
   
  4.  * Blog: http://cloudgamer.cnblogs.com/  
    5. 
   
   
   
   
  5.  * Date: 2008-7-6  
    6. 
   
   
   
   
  6.  */  
    7. 
   
   
   
   
  7.  
    8. 
   
   
   
   
  8.  
    9. 
   
   
   
   
  9.  
    10. 
   
   
   
   
  10. var $$ = function (id) {  
    11. 
   
   
   
   
  11.     return "string" == typeof id ? document.getElementById(id) : id;  
    12. 
   
   
   
   
  12. };  
    13. 
   
   
   
   
  13.  
    14. 
   
   
   
   
  14. var Extend = function(destination, source) {  
    15. 
   
   
   
   
  15.     for (var property in source) {  
    16. 
   
   
   
   
  16.         destination[property] = source[property];  
    17. 
   
   
   
   
  17.     }  
    18. 
   
   
   
   
  18.     return destination;  
    19. 
   
   
   
   
  19. }  
    20. 
   
   
   
   
  20.  
    21. 
   
   
   
   
  21. var CurrentStyle = function(element){  
    22. 
   
   
   
   
  22.     return element.currentStyle || document.defaultView.getComputedStyle(element, null);  
    23. 
   
   
   
   
  23. }  
    24. 
   
   
   
   
  24.  
    25. 
   
   
   
   
  25. var Bind = function(object, fun) {  
    26. 
   
   
   
   
  26.     var args = Array.prototype.slice.call(arguments).slice(2);  
    27. 
   
   
   
   
  27.     return function() {  
    28. 
   
   
   
   
  28.         return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));  
    29. 
   
   
   
   
  29.     }  
    30. 
   
   
   
   
  30. }  
    31. 
   
   
   
   
  31.  
    32. 
   
   
   
   
  32. var forEach = function(array, callback, thisObject){  
    33. 
   
   
   
   
  33.     if(array.forEach){  
    34. 
   
   
   
   
  34.         array.forEach(callback, thisObject);  
    35. 
   
   
   
   
  35.     }else{  
    36. 
   
   
   
   
  36.         for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }  
    37. 
   
   
   
   
  37.     }  
    38. 
   
   
   
   
  38. }  
    39. 
   
   
   
   
  39.  
    40. 
   
   
   
   
  40. var Tween = {  
    41. 
   
   
   
   
  41.     Quart: {  
    42. 
   
   
   
   
  42.         easeOut: function(t,b,c,d){  
    43. 
   
   
   
   
  43.             return -c * ((tt=t/d-1)*t*t*t - 1) + b;  
    44. 
   
   
   
   
  44.         }  
    45. 
   
   
   
   
  45.     },  
    46. 
   
   
   
   
  46.     Back: {  
    47. 
   
   
   
   
  47.         easeOut: function(t,b,c,d,s){  
    48. 
   
   
   
   
  48.             if (s == undefined) s = 1.70158;  
    49. 
   
   
   
   
  49.             return c*((tt=t/d-1)*t*((s+1)*t + s) + 1) + b;  
    50. 
   
   
   
   
  50.         }  
    51. 
   
   
   
   
  51.     },  
    52. 
   
   
   
   
  52.     Bounce: {  
    53. 
   
   
   
   
  53.         easeOut: function(t,b,c,d){  
    54. 
   
   
   
   
  54.             if ((t/=d) < (1/2.75)) {  
    55. 
   
   
   
   
  55.                 return c*(7.5625*t*t) + b;  
    56. 
   
   
   
   
  56.             } else if (t < (2/2.75)) {  
    57. 
   
   
   
   
  57.                 return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;  
    58. 
   
   
   
   
  58.             } else if (t < (2.5/2.75)) {  
    59. 
   
   
   
   
  59.                 return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;  
    60. 
   
   
   
   
  60.             } else {  
    61. 
   
   
   
   
  61.                 return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;  
    62. 
   
   
   
   
  62.             }  
    63. 
   
   
   
   
  63.         }  
    64. 
   
   
   
   
  64.     }  
    65. 
   
   
   
   
  65. }  
    66. 
   
   
   
   
  66.  
    67. 
   
   
   
   
  67.  
    68. 
   
   
   
   
  68. //    ,    ,      
    69. 
   
   
   
   
  69. var SlideTrans = function(container, slider, count, options) {  
    70. 
   
   
   
   
  70.     this._slider = $$(slider);  
    71. 
   
   
   
   
  71.     this._container = $$(container);//      
    72. 
   
   
   
   
  72.     this._timer = null;//     
    73. 
   
   
   
   
  73.     this._count = Math.abs(count);//      
    74. 
   
   
   
   
  74.     this._target = 0;//     
    75. 
   
   
   
   
  75.     thisthis._t = this._b = this._c = 0;//tween    
    76. 
   
   
   
   
  76.       
    77. 
   
   
   
   
  77.     this.Index = 0;//      
    78. 
   
   
   
   
  78.       
    79. 
   
   
   
   
  79.     this.SetOptions(options);  
    80. 
   
   
   
   
  80.       
    81. 
   
   
   
   
  81.     this.Auto = !!this.options.Auto;  
    82. 
   
   
   
   
  82.     this.Duration = Math.abs(this.options.Duration);  
    83. 
   
   
   
   
  83.     this.Time = Math.abs(this.options.Time);  
    84. 
   
   
   
   
  84.     this.Pause = Math.abs(this.options.Pause);  
    85. 
   
   
   
   
  85.     thisthis.Tween = this.options.Tween;  
    86. 
   
   
   
   
  86.     thisthis.onStart = this.options.onStart;  
    87. 
   
   
   
   
  87.     thisthis.onFinish = this.options.onFinish;  
    88. 
   
   
   
   
  88.       
    89. 
   
   
   
   
  89.     var bVertical = !!this.options.Vertical;  
    90. 
   
   
   
   
  90.     this._css = bVertical ? "top" : "left";//    
    91. 
   
   
   
   
  91.       
    92. 
   
   
   
   
  92.     //      
    93. 
   
   
   
   
  93.     var p = CurrentStyle(this._container).position;  
    94. 
   
   
   
   
  94.     p == "relative" || p == "absolute" || (this._container.style.position = "relative");  
    95. 
   
   
   
   
  95.     this._container.style.overflow = "hidden";  
    96. 
   
   
   
   
  96.     this._slider.style.position = "absolute";  
    97. 
   
   
   
   
  97.       
    98. 
   
   
   
   
  98.     thisthis.Change = this.options.Change ? this.options.Change :  
    99. 
   
   
   
   
  99.         this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;  
    100. 
   
   
   
   
  100. };  
    101. 
   
   
   
   
  101. SlideTrans.prototype = {  
    102. 
   
   
   
   
  102.   //        
    103. 
   
   
   
   
  103.   SetOptions: function(options) {  
    104. 
   
   
   
   
  104.     this.options = {//     
    105. 
   
   
   
   
  105.         Vertical:   true,//      （     ）  
    106. 
   
   
   
   
  106.         Auto:       true,//      
    107. 
   
   
   
   
  107.         Change:     0,//     
    108. 
   
   
   
   
  108.         Duration:   30,//        
    109. 
   
   
   
   
  109.         Time:       10,//      
    110. 
   
   
   
   
  110.         Pause:      3000,//    (Auto true   )  
    111. 
   
   
   
   
  111.         onStart:    function(){},//         
    112. 
   
   
   
   
  112.         onFinish:   function(){},//         
    113. 
   
   
   
   
  113.         Tween:      Tween.Quart.easeOut//tween    
    114. 
   
   
   
   
  114.     };  
    115. 
   
   
   
   
  115.     Extend(this.options, options || {});  
    116. 
   
   
   
   
  116.   },  
    117. 
   
   
   
   
  117.   //      
    118. 
   
   
   
   
  118.   Run: function(index) {  
    119. 
   
   
   
   
  119.     //  index  
    120. 
   
   
   
   
  120.     index == undefined && (index = this.Index);  
    121. 
   
   
   
   
  121.     index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);  
    122. 
   
   
   
   
  122.     //      
    123. 
   
   
   
   
  123.     this._target = -Math.abs(this.Change) * (this.Index = index);  
    124. 
   
   
   
   
  124.     this._t = 0;  
    125. 
   
   
   
   
  125.     this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);  
    126. 
   
   
   
   
  126.     thisthis._c = this._target - this._b;  
    127. 
   
   
   
   
  127.       
    128. 
   
   
   
   
  128.     this.onStart();  
    129. 
   
   
   
   
  129.     this.Move();  
    130. 
   
   
   
   
  130.   },  
    131. 
   
   
   
   
  131.   //    
    132. 
   
   
   
   
  132.   Move: function() {  
    133. 
   
   
   
   
  133.     clearTimeout(this._timer);  
    134. 
   
   
   
   
  134.     //                    
    135. 
   
   
   
   
  135.     if (this._c && this._t < this.Duration) {  
    136. 
   
   
   
   
  136.         this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));  
    137. 
   
   
   
   
  137.         this._timer = setTimeout(Bind(this, this.Move), this.Time);  
    138. 
   
   
   
   
  138.     }else{  
    139. 
   
   
   
   
  139.         this.MoveTo(this._target);  
    140. 
   
   
   
   
  140.         this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));  
    141. 
   
   
   
   
  141.     }  
    142. 
   
   
   
   
  142.   },  
    143. 
   
   
   
   
  143.   //     
    144. 
   
   
   
   
  144.   MoveTo: function(i) {  
    145. 
   
   
   
   
  145.     this._slider.style[this._css] = i + "px";  
    146. 
   
   
   
   
  146.   },  
    147. 
   
   
   
   
  147.   //     
    148. 
   
   
   
   
  148.   Next: function() {  
    149. 
   
   
   
   
  149.     this.Run(++this.Index);  
    150. 
   
   
   
   
  150.   },  
    151. 
   
   
   
   
  151.   //     
    152. 
   
   
   
   
  152.   Previous: function() {  
    153. 
   
   
   
   
  153.     this.Run(--this.Index);  
    154. 
   
   
   
   
  154.   },  
    155. 
   
   
   
   
  155.   //    
    156. 
   
   
   
   
  156.   Stop: function() {  
    157. 
   
   
   
   
  157.     clearTimeout(this._timer); this.MoveTo(this._target);  
    158. 
   
   
   
   
  158.   }  
    159. 
   
   
   
   
  159. }; 
    160.
H 5 Plus実用コードセグメント