HTML

 

 
    
     
         
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    2.  
         
  2. <html> 
    3.  
         
  3. <head> 
    4.  
         
  4.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    5.  
         
  5.     <title>Untitled Document</title> 
    6.  
         
  6. <style> 
    7.  
         
  7. .Marquee{ width:490px; margin:50px auto 0; overflow:hidden;}  
    8.  
         
  8. body,div,ul,li{ margin:0; padding:0;}  
    9.  
         
  9. ul,li{ list-style:none;}  
    10.  
         
  10. img{ display:block; border:none;}  
    11.  
         
  11. .content-main{ width:490px; height:170px; overflow:hidden;}  
    12.  
         
  12. .content{ width:490px; height:170px; overflow:hidden;}  
    13.  
         
  13. .hide{ display:none;}  
    14.  
         
  14. .menu{ width:490px; height:22px; overflow:hidden; background:#966;}  
    15.  
         
  15. .menu li{ width:160px; height:22px; overflow:hidden; float:left; line-height:22px; text-align:center;}  
    16.  
         
  16. .menu li.last-col{ width:170px; height:22px; overflow:hidden;}  
    17.  
         
  17. .current{ background: #F00;}  
    18.  
         
  18. .content a{ width:490px; height:170px; overflow:hidden; display:block;}  
    19.  
         
  19. </style>   
    20.  
         
  20. <script src="base.js"></script> 
    21.  
         
  21. </head> 
    22.  
         
  22. <body> 
    23.  
         
  23.     <div id="Marquee" class="Marquee"> 
    24.  
         
  24.         <div class="content-main"> 
    25.  
         
  25.             <div class="content"><a href="#" target="_blank"><img  src="p_w_picpaths/1.jpg"/></a></div> 
    26.  
         
  26.             <div class="content hide"><a href="#" target="_blank"><img  src="p_w_picpaths/2.jpg"/></a></div> 
    27.  
         
  27.             <div class="content hide"><a href="#" target="_blank"><img  src="p_w_picpaths/3.jpg"/></a></div> 
    28.  
         
  28.         </div> 
    29.  
         
  29.         <ul class="menu"> 
    30.  
         
  30.             <li class="list1">tab1</li> 
    31.  
         
  31.             <li class="list1">tab2</li> 
    32.  
         
  32.             <li class="list1 last-col">tab3</li> 
    33.  
         
  33.         </ul> 
    34.  
         
  34.         </div>   
    35.  
         
  35. <script src="slide.js"></script>    
    36.  
         
  36. <script> 
    37.  
         
  37.     var tabMenu = getElementsByClassName("list1"),  
    38.  
         
  38.         tabContent = getElementsByClassName("content");  
    39.  
         
  39.     new Slider({tabMenu :tabMenu,tabContent : tabContent,autoPlay : true});  
    40.  
         
  40.           
    41.  
         
  41. </script> 
    42.  
         
  42. </body> 
    43.  
         
  43. </html> 
    44.  
        
 
    
base.js
 
    
 
 
    
 
    
     
         
  1. function getElementsByClassName(className,context){  
    2.  
         
  2.         context = context || document;  
    3.  
         
  3.         if(context.getElementsByClassName){  
    4.  
         
  4.             return context.getElementsByClassName(className);     
    5.  
         
  5.         }  
    6.  
         
  6.         var nodes = context.getElementsByTagName("*"),ret=[];//获取页面上的所有节点  
    7.  
         
  7.         for(var i=0;i<nodes.length;i++){   //遍历所有的节点  
    8.  
         
  8.             if(hasClass(nodes[i],className)) ret.push(nodes[i]);  
    9.  
         
  9.         }     
    10.  
         
  10.         return ret;  
    11.  
         
  11.     }  
    12.  
         
  12.       
    13.  
         
  13. //检查有没有类  
    14.  
         
  14. function hasClass(node,className){  
    15.  
         
  15.     var names = node.className.split(/\s+/);//正则表达式所有的类名用空格分开     
    16.  
         
  16.     //遍历这个类名  
    17.  
         
  17.     for(var i=0;i<names.length;i++){  
    18.  
         
  18.         if(names[i]==className)  
    19.  
         
  19.             return true;      
    20.  
         
  20.         }  
    21.  
         
  21.         return false;     
    22.  
         
  22.     }  
    23.  
         
  23.           
    24.  
         
  24. /**  
    25.  
         
  25. 参数说明  
    26.  
         
  26. curTime 当前时间 即动画已经进行了多长时间 开始时间为0  
    27.  
         
  27. start : 开始值  
    28.  
         
  28. dur : 动画持续多长时间  
    29.  
         
  29. alter : 总的变化量  
    30.  
         
  30. */ 
    31.  
         
  31. function animate(o,start,alter,dur,fx){  
    32.  
         
  32.     var curTime=0;  
    33.  
         
  33.     var t = setInterval(function(){  
    34.  
         
  34.         if(curTime>=dur) clearInterval(t);  
    35.  
         
  35.         for(var i in start){  
    36.  
         
  36.             o.style[i] = fx(start[i],alter[i],curTime,dur) + "px";    
    37.  
         
  37.         }  
    38.  
         
  38.         curTime+=50;  
    39.  
         
  39.     },50)     
    40.  
         
  40.     return function(){  
    41.  
         
  41.         clearInterval(t);     
    42.  
         
  42.     };  
    43.  
         
  43. }  
    44.  
         
  44.  
    45.  
         
  45. function Linear(start,alter,curTime,dur){  
    46.  
         
  46.     return start + curTime/dur * alter;   
    47.  
         
  47.     //最简单的线性变化 即匀速运动      
    48.  
         
  48. }  
    49.  
         
  49. //加速运动  
    50.  
         
  50. function Quad(start,alter,curTime,dur){  
    51.  
         
  51.     return start + Math.pow(curTime/dur,2)*alter;     
    52.  
         
  52. }  
    53.  
         
  53.  function addClass(obj,className){    
    54.  
         
  54.      obj.className+=" " +className;      
    55.  
         
  55.      return obj;    
    56.  
         
  56. }  
    57.  
         
  57. function delClass(obj,className){    
    58.  
         
  58.     var s = obj.className.split(/\s+/);//正则把类名分开    
    59.  
         
  59.     for(var i=0;i<s.length;i++){    
    60.  
         
  60.     if(s[i]==className){    
    61.  
         
  61.     delete s[i];        
    62.  
         
  62.     }       
    63.  
         
  63.     }    
    64.  
         
  64.     obj.className = s.join(" ");    
    65.  
         
  65.     return obj;    
    66.  
         
  66. }   
    67.  
         
  67. function addEvent(obj,type,fn,status){  
    68.  
         
  68.     if(obj.addEventListener){  
    69.  
         
  69.         obj.addEventListener(type,fn,false);  
    70.  
         
  70.     }else{  
    71.  
         
  71.         obj.attachEvent("on"+type,function(){  
    72.  
         
  72.             fn.call(obj);  
    73.  
         
  73.         })  
    74.  
         
  74.     }  
    75.  
         
  75. }  
    76.  
        
 
    
slider.js
 
    
 
 
    
 
    
     
         
  1. /**  
    2.  
         
  2.  * @author tugenhua   
    3.  
         
  3.  * @param {Object} config 在构造函数内 config以对象的方式传入参数  
    4.  
         
  4.  * 以前我们传参数(xx,x,y)这样传的 但是以对象方式传入参数有个好处 就是当实例化对象时候 不需要按照顺序写！  
    5.  
         
  5.  * 那个写在前面或者写在后面没有关系   
    6.  
         
  6.  * 在页面上调用方式 如下：new Slider({tabMenu :tabMenu,tabContent : tabContent,autoPlay : true});  
    7.  
         
  7.  * autoPlay为true 说明可以自动播放 如果传参数为flase的话 那么他就不会自动切换,  
    8.  
         
  8.  * 当然在函数内 config.trigger 有这样的传递参数 默认情况下为鼠标移动 我们在传参数时候  
    9.  
         
  9.  * 也可以传click事件 方式：trigger ："click" 就是以点击形式  
    10.  
         
  10.  * 在写HTML结构时 尽量以列表项和内容项有相同的class 这样就可以获取class 进行操作  
    11.  
         
  11.  * 此js 获取类名依赖于底层base.js  
    12.  
         
  12.  * 在写setInterval时候 一定要注意一个地方 就是要保存时间t保存下来 否则的话在轮播时候会有bug的  
    13.  
         
  13.  * 这个幻灯片原里其实就是和tab自动切换的原理是一样的  那么tab自动切换我就不写了,原理是一模一样的.  
    14.  
         
  14.  */ 
    15.  
         
  15. function Slider(config){  
    16.  
         
  16.     this.tabMenu = config.tabMenu;  
    17.  
         
  17.     this.tabContent = config.tabContent;  
    18.  
         
  18.     this.currentClass = config.currentClass || "current";  
    19.  
         
  19.     var trigger = config.trigger || "mouseover";  
    20.  
         
  20.     var playTime = config.playTime || 3000;  
    21.  
         
  21.     var autoPlay = config.autoPlay;  
    22.  
         
  22.     this.currentIndex =0;// 当前的索引从1开始  
    23.  
         
  23.     var that = this;  
    24.  
         
  24.     var t;  
    25.  
         
  25.     this.tabMenu[0].className +=" " +this.currentClass;  
    26.  
         
  26.     if(autoPlay){  
    27.  
         
  27.         clearInterval(t);  
    28.  
         
  28.         t = setInterval(function(){  
    29.  
         
  29.             that.autoHandler()  
    30.  
         
  30.         },playTime);  
    31.  
         
  31.     }  
    32.  
         
  32.     for(var i=0;i<this.tabMenu.length;i++){  
    33.  
         
  33.         this.tabMenu[i]._index = i; //保存当前的索引  
    34.  
         
  34.         addEvent(this.tabMenu[i],trigger,function(){  
    35.  
         
  35.             that.showItem(this._index);  
    36.  
         
  36.             this.currentIndex = this._index;//当前的索引i 保存在变量this.currentIndex里面  
    37.  
         
  37.         })  
    38.  
         
  38.         this.tabMenu[i].onmouseover = function(){  
    39.  
         
  39.             clearInterval(t);  
    40.  
         
  40.         }  
    41.  
         
  41.         this.tabMenu[i].onmouseout = function(){  
    42.  
         
  42.             t = setInterval(function(){  
    43.  
         
  43.                 that.autoHandler();  
    44.  
         
  44.             },playTime)  
    45.  
         
  45.         }  
    46.  
         
  46.         for(var j=0;j<this.tabContent.length;j++){  
    47.  
         
  47.             this.tabContent[j].onmouseover = function(){  
    48.  
         
  48.                 clearInterval(t);  
    49.  
         
  49.             }  
    50.  
         
  50.             this.tabContent[j].onmouseout = function(){  
    51.  
         
  51.                 t = setInterval(function(){  
    52.  
         
  52.                     that.autoHandler();  
    53.  
         
  53.                 },playTime)  
    54.  
         
  54.             }  
    55.  
         
  55.         }  
    56.  
         
  56.     }     
    57.  
         
  57. }  
    58.  
         
  58. Slider.prototype = {  
    59.  
         
  59.         showItem : function(n){  
    60.  
         
  60.             for(var i=0;i<this.tabContent.length;i++){  
    61.  
         
  61.                 this.tabContent[i].style.display = "none";  
    62.  
         
  62.             }  
    63.  
         
  63.             this.clearClass();  
    64.  
         
  64.             addClass(this.tabMenu[n],this.currentClass);  
    65.  
         
  65.             this.tabContent[n].style.display = "block";  
    66.  
         
  66.         },  
    67.  
         
  67.         clearClass : function(){  
    68.  
         
  68.         for(var k=0;k<this.tabMenu.length;k++){  
    69.  
         
  69.             if(hasClass(this.tabMenu[k],this.currentClass)){  
    70.  
         
  70.                 delClass(this.tabMenu[k],this.currentClass);  
    71.  
         
  71.                 }  
    72.  
         
  72.             }  
    73.  
         
  73.         },  
    74.  
         
  74.         autoHandler : function(){  
    75.  
         
  75.             this.currentIndex++;  
    76.  
         
  76.             if(this.currentIndex>=this.tabMenu.length){  
    77.  
         
  77.                 this.currentIndex = 0;  
    78.  
         
  78.             }  
    79.  
         
  79.             this.showItem(this.currentIndex);  
    80.  
         
  80.         }  
    81.  
         
  81.     } 
    82.  
        
 
    
 注意事项：this.currentIndex = this._index;//当前的索引i 保存在变量this.currentIndex里面  这段代码中 this.currentIndex 改成 that.currentIndex 否则的话会有bug产生，我一开始没有注意到！