返回列表 回复 发帖

[JavaScript] 原来js轮播图

  1.                 html,body,ul,li,h3{margin:0;padding:0}
  2.                 ul,li{list-style:none}
  3.                 a{text-decoration:none;color:#fff}
  4.                 a:hover{text-decoration:none;color:#fff}
  5.                 img{vertical-align:top;border:0;-ms-interpolation-mode:bicubic}
  6.                 .w-focus{position:relative}
  7.                 .w-focus,.w-focus ul,.w-focus li,.w-focus a,.w-focus img{width:300px;height:220px}
  8.                 .w-focus li{position:absolute;left:0;top:0}
  9.                 .w-focus a{position:relative;display:block}
  10.                 .w-focus h3{position:absolute;left:0;bottom:0;width:100%;height:26px;overflow:hidden;text-indent:9px;font:13px/26px \5FAE\8F6F\96C5\9ED1;background:rgba(0,0,0,.7);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#b2000000', EndColorStr='#b2000000');}
  11.                 :root .w-focus h3{filter:''}
  12.                 .w-focusbtn{position:absolute;z-index:2;bottom:7px;right:8px}
  13.                 .w-focusbtn i{float:left;cursor:pointer;width:9px;height:9px;margin-right:3px;background:#fff}
  14.                 .w-focusbtn .cur{background:#FFCF10}
复制代码
  1. <div class="w-focus" id="w-focus">
  2.         <ul>
  3.             <li>
  4.                     <a href="http://web.2144.cn/ticket/question/122326">
  5.                             <img src="http://static.2144.cn/news/uploads/20160706/l9sss1s9.jpg" alt="拒绝外挂">
  6.                             <h3>不知道吃什么的时候我想到了它</h3>
  7.                     </a>
  8.             </li>

  9.             <li>
  10.                     <a href="http://hd.2144.cn/lycq/zigw/135831">
  11.                             <img src="http://static.2144.cn/news/uploads/20160706/335kj443.jpg" alt="大礼天天送">
  12.                             <h3>大礼天天送</h3>
  13.                     </a>
  14.             </li>

  15.             <li>
  16.                     <a href="http://bbs.web2144.cn/thread-1242965-1-1.html">
  17.                             <img src="http://static.2144.cn/news/uploads/20160706/bhcb46ds.jpg" alt="指导员">
  18.                             <h3>指导员</h3>
  19.                     </a>
  20.             </li>

  21.             <li>
  22.                     <a href="http://web.2144.cn/lycq/zigw/135893">
  23.                             <img src="http://static.2144.cn/news/uploads/20160706/oaconsem.jpg" alt="VIP俱乐部">
  24.                             <h3>VIP俱乐部</h3>
  25.                     </a>
  26.             </li>

  27.             <li>
  28.                     <a href="http://hd.2144.cn/lycq/zigw/server/sid/1">
  29.                             <img src="http://static.2144.cn/news/uploads/20160706/624s2os8.jpg" alt="魂刻觉醒">
  30.                             <h3>魂刻觉醒</h3>
  31.                     </a>
  32.             </li>
  33.         </ul>
  34.         <div class="w-focusbtn">
  35.             <i class="cur"></i><i></i><i></i><i></i><i></i>
  36.         </div>
  37.     </div>
复制代码
  1.                  var doc = document,

  2.                 query = {
  3.                    
  4.                     EventUtil : {

  5.                             add : function(ele,type,handler){

  6.                                     if (ele.addEventListener){

  7.                                             ele.addEventListener(type, handler, false);

  8.                                     }else if(ele.attachEvent){

  9.                                             ele.attachEvent('on' + type,handler);

  10.                                     }else{
  11.                                             ele["on" + type] = handler;
  12.                                     }
  13.                             },

  14.                             remove : function(ele,type,handler){

  15.                                     if(ele.removeEventListener){

  16.                                             ele.removeEventListener(type, handler, false);

  17.                                     }else if(ele.attachEvent){

  18.                                             ele.detachEvent('on' + type,handler);

  19.                                     }else{
  20.                                             ele["on" + type] = null;
  21.                                     }
  22.                             },
  23.                             
  24.                             getEvent : function(event){

  25.                                     return event ? event : window.event;

  26.                             },
  27.                             
  28.                             getTarget : function(event){

  29.                                     return event.target || event.srcElement;

  30.                             },

  31.                             preventDefault : function(event){
  32.                                
  33.                                     var e = query.EventUtil.getEvent(event);

  34.                                     if(event.preventDefault){

  35.                                             event.preventDefault();

  36.                                     }else{

  37.                                             event.returnValue = false;

  38.                                     }
  39.                             },

  40.                             stopPropagation: function(event){

  41.                                     if(event.stopPropagation){

  42.                                             event.stopPropagation();

  43.                                     }else{

  44.                                             event.cancelBubble = true;

  45.                                     }
  46.                                
  47.                             }
  48.                     },

  49.                     getTarget : function(event){

  50.                         var e = query.EventUtil.getEvent(event),

  51.                             target = query.EventUtil.getTarget(e);

  52.                         return target;
  53.                     },

  54.                     addClass : function(node,classname){

  55.                             if(node.classList){

  56.                                 node.classList.add(classname);

  57.                             }else{

  58.                                 node.className += ' ' + classname;
  59.                             }
  60.                     },

  61.                     removeClass : function(node,classname){
  62.                             
  63.                             if(node.classList){

  64.                                 node.classList.remove(classname);

  65.                             }else{
  66.                                
  67.                                 node.className = node.className.replace(classname,'');
  68.                             }
  69.                     },

  70.                     getByClass : function(Classname,ele){

  71.                             var ele = ele ? ele : document;

  72.                             return ele.querySelectorAll ? ele.querySelectorAll('.'+Classname) : (function(ele){

  73.                                     var ele = ele.getElementsByTagName('*'),

  74.                                         Result = [],

  75.                                         re = new RegExp('\\b'+Classname+'\\b','i'),

  76.                                         i = 0;
  77.                                        
  78.                                         for(;i < ele.length;i++){

  79.                                                 if(re.test(ele[i].className)){

  80.                                                         Result.push(ele[i]);

  81.                                                 }
  82.                                         }
  83.                                        
  84.                                         return Result;

  85.                             }(ele));

  86.                     },

  87.                     reduceDimension:function(arr){

  88.                         var reduced = [],

  89.                             i = 0,

  90.                             len = arr.length;

  91.                         for (; i < len; i++){

  92.                             reduced = reduced.concat(arr[i]);

  93.                         }
  94.                         return reduced;
  95.                     },

  96.                     forEach : (function(){

  97.                             return  function(ary,callback){
  98.                                     if(typeof Array.prototype.forEach == "function"){

  99.                                         ary.forEach(function(value,index,a){
  100.                                             callback.call(ary,value,index,a);
  101.                                         });

  102.                                     }else{// 对于古董浏览器,如IE6-IE8
  103.                                         for(var k = 0, length = ary.length; k < length; k++) {
  104.                                             callback.call(ary,ary[k],k,ary);
  105.                                         }
  106.                                     }

  107.                             };
  108.                     })()

  109.                 };



  110.        
复制代码
  1. var packMove = (function(){
  2. //packMove(box,{left:768,height:800,...,},{duration:500,ease:tween.linear},callback());
  3. var getStyle = function(el, style){
  4. if(/msie/i.test(navigator.userAgent)){
  5. style = style.replace(/\-(\w)/g, function(all, letter){
  6. return letter.toUpperCase();
  7. });
  8. var value = el.currentStyle[style];
  9. (value == "auto")&&(value = "0px" );
  10. return value;
  11. }else{
  12. return document.defaultView.getComputedStyle(el,null).getPropertyValue(style);
  13. }
  14. };


  15. var tween = {
  16. easeInQuad: function(pos){
  17. return Math.pow(pos, 2);
  18. },

  19. easeOutQuad: function(pos){
  20. return -(Math.pow((pos-1), 2) -1);
  21. },

  22. easeInOutQuad: function(pos){
  23. if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,2);
  24. return -0.5 * ((pos-=2)*pos - 2);
  25. },

  26. easeInCubic: function(pos){
  27. return Math.pow(pos, 3);
  28. },

  29. easeOutCubic: function(pos){
  30. return (Math.pow((pos-1), 3) +1);
  31. },

  32. easeInOutCubic: function(pos){
  33. if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
  34. return 0.5 * (Math.pow((pos-2),3) + 2);
  35. },

  36. easeInQuart: function(pos){
  37. return Math.pow(pos, 4);
  38. },

  39. easeOutQuart: function(pos){
  40. return -(Math.pow((pos-1), 4) -1)
  41. },

  42. easeInOutQuart: function(pos){
  43. if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4);
  44. return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2);
  45. },

  46. easeInQuint: function(pos){
  47. return Math.pow(pos, 5);
  48. },

  49. easeOutQuint: function(pos){
  50. return (Math.pow((pos-1), 5) +1);
  51. },

  52. easeInOutQuint: function(pos){
  53. if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,5);
  54. return 0.5 * (Math.pow((pos-2),5) + 2);
  55. },

  56. easeInSine: function(pos){
  57. return -Math.cos(pos * (Math.PI/2)) + 1;
  58. },

  59. easeOutSine: function(pos){
  60. return Math.sin(pos * (Math.PI/2));
  61. },

  62. easeInOutSine: function(pos){
  63. return (-.5 * (Math.cos(Math.PI*pos) -1));
  64. },

  65. easeInExpo: function(pos){
  66. return (pos==0) ? 0 : Math.pow(2, 10 * (pos - 1));
  67. },

  68. easeOutExpo: function(pos){
  69. return (pos==1) ? 1 : -Math.pow(2, -10 * pos) + 1;
  70. },

  71. easeInOutExpo: function(pos){
  72. if(pos==0) return 0;
  73. if(pos==1) return 1;
  74. if((pos/=0.5) < 1) return 0.5 * Math.pow(2,10 * (pos-1));
  75. return 0.5 * (-Math.pow(2, -10 * --pos) + 2);
  76. },

  77. easeInCirc: function(pos){
  78. return -(Math.sqrt(1 - (pos*pos)) - 1);
  79. },

  80. easeOutCirc: function(pos){
  81. return Math.sqrt(1 - Math.pow((pos-1), 2))
  82. },

  83. easeInOutCirc: function(pos){
  84. if((pos/=0.5) < 1) return -0.5 * (Math.sqrt(1 - pos*pos) - 1);
  85. return 0.5 * (Math.sqrt(1 - (pos-=2)*pos) + 1);
  86. },

  87. easeOutBounce: function(pos){
  88. if ((pos) < (1/2.75)) {
  89. return (7.5625*pos*pos);
  90. } else if (pos < (2/2.75)) {
  91. return (7.5625*(pos-=(1.5/2.75))*pos + .75);
  92. } else if (pos < (2.5/2.75)) {
  93. return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
  94. } else {
  95. return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
  96. }
  97. },

  98. easeInBack: function(pos){
  99. var s = 1.70158;
  100. return (pos)*pos*((s+1)*pos - s);
  101. },

  102. easeOutBack: function(pos){
  103. var s = 1.70158;
  104. return (pos=pos-1)*pos*((s+1)*pos + s) + 1;
  105. },

  106. easeInOutBack: function(pos){
  107. var s = 1.70158;
  108. if((pos/=0.5) < 1) return 0.5*(pos*pos*(((s*=(1.525))+1)*pos -s));
  109. return 0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos +s) +2);
  110. },

  111. elastic: function(pos) {
  112. return -1 * Math.pow(4,-8*pos) * Math.sin((pos*6-1)*(2*Math.PI)/2) + 1;
  113. },

  114. swingFromTo: function(pos) {
  115. var s = 1.70158;
  116. return ((pos/=0.5) < 1) ? 0.5*(pos*pos*(((s*=(1.525))+1)*pos - s)) :
  117. 0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos + s) + 2);
  118. },

  119. swingFrom: function(pos) {
  120. var s = 1.70158;
  121. return pos*pos*((s+1)*pos - s);
  122. },

  123. swingTo: function(pos) {
  124. var s = 1.70158;
  125. return (pos-=1)*pos*((s+1)*pos + s) + 1;
  126. },

  127. bounce: function(pos) {
  128. if (pos < (1/2.75)) {
  129. return (7.5625*pos*pos);
  130. } else if (pos < (2/2.75)) {
  131. return (7.5625*(pos-=(1.5/2.75))*pos + .75);
  132. } else if (pos < (2.5/2.75)) {
  133. return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
  134. } else {
  135. return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
  136. }
  137. },

  138. bouncePast: function(pos) {
  139. if (pos < (1/2.75)) {
  140. return (7.5625*pos*pos);
  141. } else if (pos < (2/2.75)) {
  142. return 2 - (7.5625*(pos-=(1.5/2.75))*pos + .75);
  143. } else if (pos < (2.5/2.75)) {
  144. return 2 - (7.5625*(pos-=(2.25/2.75))*pos + .9375);
  145. } else {
  146. return 2 - (7.5625*(pos-=(2.625/2.75))*pos + .984375);
  147. }
  148. },

  149. easeFromTo: function(pos) {
  150. if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4);
  151. return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2);
  152. },

  153. easeFrom: function(pos) {
  154. return Math.pow(pos,4);
  155. },

  156. easeTo: function(pos) {
  157. return Math.pow(pos,0.25);
  158. },

  159. linear: function(pos) {
  160. return pos;
  161. },

  162. sinusoidal: function(pos) {
  163. return (-Math.cos(pos*Math.PI)/2) + 0.5;
  164. },

  165. reverse: function(pos) {
  166. return 1 - pos;
  167. },

  168. mirror: function(pos, transition) {
  169. transition = transition || tween.sinusoidal;
  170. if(pos<0.5)
  171. return transition(pos*2);
  172. else
  173. return transition(1-(pos-0.5)*2);
  174. },

  175. flicker: function(pos) {
  176. var pos = pos + (Math.random()-0.5)/5;
  177. return tween.sinusoidal(pos < 0 ? 0 : pos > 1 ? 1 : pos);
  178. },

  179. wobble: function(pos) {
  180. return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
  181. },

  182. pulse: function(pos, pulses) {
  183. return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5;
  184. },

  185. blink: function(pos, blinks) {
  186. return Math.round(pos*(blinks||5)) % 2;
  187. },

  188. spring: function(pos) {
  189. return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
  190. },

  191. none: function(pos){
  192. return 0;
  193. },

  194. full: function(pos){
  195. return 1;
  196. }
  197. };


  198. function move(elem,json,options,callback){
  199. options = options || {};
  200. options.duration = options.duration || 2000;
  201. options.ease = options.ease || tween.easeOutQuad;

  202. var start = {},distance = {};
  203. for(var atrr in json){
  204. if(atrr == "opacity"){
  205. start[atrr] = parseInt(100 * getStyle(elem, "opacity"));
  206. }else{
  207. start[atrr] = parseInt(getStyle(elem, atrr));
  208. }
  209. distance[atrr] = json[atrr] - start[atrr];
  210. var speed = (json[atrr] - start[atrr])/options.duration;
  211. speed=speed>0?Math.ceil(speed):Math.floor(speed);
  212. var startTime = new Date().getTime();
  213. (function(atrr){
  214. setTimeout(function(){
  215. var newTime = new Date().getTime();
  216. var easetime = (newTime - startTime)/options.duration;
  217. if(atrr == "opacity") {
  218. elem.style.filter = "alpha(opacity:" + (start[atrr] + options.ease(easetime) * distance[atrr]) + ")";
  219. elem.style.opacity = start[atrr]/100 + options.ease(easetime) * distance[atrr]/100;
  220. }else{

  221. elem.style[atrr] = Math.ceil(start[atrr] + options.ease(easetime) * distance[atrr]) + "px";
  222. }
  223. if(options.duration <= (newTime - startTime)){
  224. elem.style[atrr] = json[atrr] + "px";
  225. if(callback){
  226. callback();
  227. }
  228. }else{
  229. setTimeout(arguments.callee,25);
  230. }
  231. },25)
  232. })(atrr)
  233. }
  234. }

  235. return move;
  236. })(),

  237. focusFun = function(){

  238. var wraps = doc.getElementById('w-focus'),

  239. lis = query.reduceDimension( wraps.getElementsByTagName('li') ),

  240. btns = query.reduceDimension( wraps.getElementsByTagName('i') ),

  241. nums = lis.length - 1,

  242. timer = 5000,

  243. prev = 0,

  244. curindex = 0,

  245. exeFun = function(){

  246. packMove(lis[prev],{opacity:0},{duration:300},function(){

  247. lis[prev].style.zIndex = 0;

  248. });

  249. packMove(lis[curindex],{opacity:100},{duration:300},function(){

  250. lis[curindex].style.zIndex = 1;

  251. });

  252. query.forEach(btns,function(item,index){

  253. item.className = index == curindex ? 'cur' : '';

  254. });
  255. },

  256. doPlay = function(){

  257. curindex = ( curindex == nums ) ? 0 : ++curindex;

  258. prev = curindex ? (curindex - 1) : nums;

  259. exeFun();
  260. },

  261. handl = setInterval(doPlay,timer);



  262. query.forEach(lis,function(item,index){

  263. if(index){

  264. item.style.zIndex = 0;

  265. item.style.opacity = 0;

  266. }else{

  267. item.style.zIndex = 1;

  268. item.style.opacity = 100;

  269. }

  270. });




  271. query.EventUtil.add(wraps,'mouseover',function(){
  272. clearInterval(handl);
  273. });

  274. query.EventUtil.add(wraps,'mouseout',function(){

  275. handl = setInterval(doPlay,timer);

  276. });

  277. query.EventUtil.add(wraps,'click',function(event){

  278. var target = query.getTarget(event);

  279. if(target.nodeName.toLowerCase() == 'i' && target.parentNode.className == 'w-focusbtn'){

  280. query.forEach(btns,function(item,index){

  281. if( lis[index].style.zIndex == 1 ) prev = index;

  282. if(item == target) curindex = index;

  283. });

  284. exeFun();

  285. }

  286. });

  287. };

  288. focusFun();
复制代码
本帖最后由 symfony 于 2017-3-21 17:19 编辑

优化了一下代码
一、tween动画函数去除

二、opacity透明优化了一下
  1. packMove = function(){
  2.                     //packMove(box,{left:768,height:800,...,},{duration:500,ease:tween.linear},callback());
  3.                     var getStyle = function(el, style){
  4.                         if(/msie/i.test(navigator.userAgent)){
  5.                             style = style.replace(/\-(\w)/g, function(all, letter){
  6.                                 return letter.toUpperCase();
  7.                             });
  8.                             var value = el.currentStyle[style];
  9.                             (value == "auto")&&(value = "0px" );
  10.                             return value;
  11.                         }else{
  12.                             return document.defaultView.getComputedStyle(el,null).getPropertyValue(style);
  13.                         }
  14.                         };


  15.                 var setOpacity = function(el,i){

  16.                         if(document.addEventListener){

  17.                             el.style.opacity = i;

  18.                             return;
  19.                         }

  20.                         el.style.filter = 'alpha(opacity='+ i * 100 +')';
  21.                 }

  22.                 var getOpacity = function(el){

  23.                         var value;

  24.                         if(document.addEventListener){
  25.                             value = el.style.opacity;
  26.                             return value;
  27.                         }

  28.                         var ary = el.style.filter.match(/alpha\(opacity.*)\)/);

  29.                         value = ary ? ary[1] : 100;

  30.                         return value / 100;
  31.                      
  32.                     };


  33.                     function move(elem,json,options,callback){

  34.                           options = options || {};

  35.                           options.duration = options.duration || 2000;

  36.                           var start = {},distance = {};

  37.                           for(var atrr in json){

  38.                      

  39.                               start[atrr] = atrr == "opacity" ? getOpacity(elem) : parseInt(getStyle(elem, atrr));

  40.                      

  41.                             distance[atrr] = json[atrr] - start[atrr];

  42.                             var speed = (json[atrr] - start[atrr])/options.duration;

  43.                             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

  44.                             var startTime = new Date().getTime();

  45.                             (function(atrr){

  46.                               setTimeout(function(){

  47.                                 var newTime = new Date().getTime();

  48.                                 var easetime = (newTime - startTime)/options.duration;

  49.                                 if (atrr == "opacity") {

  50.                                 setOpacity(elem, start[atrr]/100 + easetime * distance[atrr]/100 );
  51.                                 
  52.                                 }else{
  53.                                    elem.style[atrr] = Math.ceil(start[atrr] + easetime * distance[atrr]) + "px";
  54.                                 }


  55.                                 if(options.duration <= (newTime - startTime)){

  56.                                   elem.style[atrr] = json[atrr] + "px";

  57.                                   if(callback){

  58.                                     callback();

  59.                                   }

  60.                                 }else{
  61.                                   setTimeout(arguments.callee,25);
  62.                                 }
  63.                               },25)

  64.                             })(atrr);

  65.                           }

  66.                     }

  67.                     return move;
  68.             }()
复制代码
  1. if(document.addEventListener){

  2.                     query.forEach(liEle,function(item,index){

  3.                             item.style.zIndex =  index ? 0 : 1;

  4.                             item.style.opacity = index ? 0 : 100;
  5.                     });

  6.                 }else{

  7.                     query.forEach(liEle,function(item,index){

  8.                             item.style.zIndex =  index ? 0 : 1;

  9.                             item.style.filter = index ? 'alpha(opacity=0)' : 'alpha(opacity=100)';
  10.                     });

  11.                 }
复制代码
返回列表