1. //声明一个全局变量
    2. var index=0,//当前显示图片的索引，默认值设置为0
    3.     timer=null,//定时器
    4.     main=byId("main"),
    5.     prev=byId("prev"),//上一张按钮
    6.     next=byId("next"),//下一张按钮接着给他们绑定事件
    7.     pics=byId("banner").getElementsByTagName("div"),//箭头效果换图的主要设置 返回的数组
    8.     dots=byId("dots").getElementsByTagName("span");
    9.     banner=byId("banner"),
    10.     menuContent=byId("menu-content"),
    11.     //可以看作元素的集合也可以看作为数组
    12.     menuItems=menuContent.getElementsByClassName("menu-item"),
    13.     subMenu=byId("sub-menu"),
    14.     innerBox=subMenu.getElementsByClassName("inner-box"),
    15.     size=pics.length;
    16.     //console.log(size);
    18. //封装getElementById()
    19. //==用于一般比较  ===用于严格比较
    20. //==在比较的时候可以转换数据类型 ===严格比较，只要类型不匹配就会返回false
    21. // function byId(id){
    22. //     return typeof(id)==="string"?document.getElementById(id):id;
    23. // }
    24. //DOM0级事件：只能给一个元素得某一个行为绑定一次方法，第二次绑定得话会把前面得覆盖掉；
    25. //DOM2级事件：可以给某一个元素得同一个行为绑定多个 不同得方法
    26. //DOM1级事件他是1998年10月1号称为W3的推荐标准里面没有定义事件相关得内容  只是讲了模型并没有讲事件
    28. //监听方法：可以去随时监听到每异步操作来执行
    29. // addEventListener() and  removeEventListener() --除了ie9以下
    30. // addEventListener()可以为元素添加多个事件处理程序，触发时候按照添加的而顺序一次进行调用
    31. // removeEventListener()是移除事件处理程序（不能移除匿名添加的函数）
    35. // addEventListener() and  removeEventListener()
    36. //第一个参数：事件名字
    37. //第二个参数：事件处理程序函数
    38. //第三个参数：布尔值；true表示在捕获阶段调用  flase表示在冒泡阶段调用
    39. //                   从上向下执行           从第低向上执行  直接包含的父元素
    41. //IE浏览器 -- IE6-8版本
    42. //attachEvent()   and detachEvent()
    43. //attachEvent()代表可以添加多个事件处理程序，也是可以触发的时候按照添加的而顺序一次处理程序
    44. //detachEvent()代表的的移除事件处理程序(不能溢出匿名添加的函数)
    46. //attachEvent()   and detachEvent()
    47. //第一个参数：一个事件名字
    48. //第二个参数：事件处理程序函数
    49. //IE浏览器没有第三个浏览器  就这个两个
    50. // next.onclick=function(){
    51. //     alert("匿名函数");
    52. // }
    54. // next.onclick=function(){
    55. //     alert("这是0级事件覆盖上面的事件");
    56. // }
    58. //点击下一张按钮显示下一张图片 编写DOM二级事件
    59. // next.addEventListener("click",function(){
    60. //     alert("在DOM2级事件中这张是第一张显示的")
    61. // });
    62. // next.addEventListener("click",function(){
    63. //     alert("在DOM2级事件中上一张显示出来了之后这样也会一次执行")
    64. // });
    66. function byId(id){
    67.     return typeof(id)==="string"?document.getElementById(id):id;
    68. }
    70. //封装通用事件的绑定方法
    71. //传送三个参数
    72. //第一个是绑定事件的DOM元素
    73. // 第二个是事件名字
    74. // 第三个是事件处理程序
    75. function addHandler(element,type,handler){
    76.     //非IE浏览器
    77.     if(element.addEventListener){
    78.         element.addEventListener(type,handler,true);
    79.         //IE浏览器支持的DOM2级事件
    80.     } else if (element.attachEvent) {
    81.         element.attachEvent("on"+type,handler);
    82.         //IE浏览器不支持DOM2级事件时
    83.     } else {
    84.         element["on"+type]=null;
    85.     }
    86. }
    88. //封装测试
    89. // addHandler(next,"click",function(){alert("11")});
    91. // addHandler(next,"click",function(){alert("22")});
    92. //点击下一张按钮显示下一张图片
    94. // addHandler(next,"click",function(){
    95. //     //点击下一个按钮，使得索引递增  上面设置的index=0
    96. //     index++
    97. //     // alert(index)调试弹出窗口
    98. //     if (index>=size) {index=0}
    99. //         // console.log(index);
    100. //     for(var i=0;i<size;i++){
    101. //         pics[i].style.display="none";
    102. //         //数组里面的全部先设置为不显示在下面到了哪里就显示哪个
    103. //         dots[i].className="";
    104. //         //先设置全部圆点不亮等到下面颠倒哪里圆点就亮哪个
    105. //         //这里设置空的话就找不到任何名字就不会显示
    106. //     }
    107. //     pics[index].style.display="block";
    108. //     //小圆点换图设置
    109. //     dots[index].className="active";//动态的给她添加高亮样式
    110. // });
    112. //清除定时器，停止自动轮播
    113. function stopAutoplay(){
    114.     if (timer) {
    115.         clearInterval(timer);
    116.     }
    117. }
    119. //鼠标滑过主菜单
    120. for (var m=0,idx,mlen=menuItems.length;m<mlen;m++){
    121.     //给所有的主菜单定义属性，表明它索引
    122.     menuItems[m].setAttribute("data-index",m);
    123.     addHandler(menuItems[m],"mouseover",function(){
    124.         //显示主菜单所在的背景
    125.         subMenu.className="sub-menu";//隐形的将hide属性移除
    126.         //获取当前主菜单的索引
    127.         idx=this.getAttribute("data-index");
    128.         //alert(idx);
    130.         //便利所有的子菜单innerBox,将他们先隐藏起来
    131.         for(var j=0,jlen=innerBox.length;j<jlen;j++){
    132.             //隐藏所有的子菜单
    133.             innerBox[j].style.display="none";
    134.             menuItems[j].style.background="none";
    135.         }
    136.         //找到当前的字菜单，让他显示出来
    137.         innerBox[idx].style.display="block";
    138.         menuItems[idx].style.background="rgba(0,0,0,0.1)";
    139.     });
    140. }
    142. //鼠标离开banner区域。隐藏子菜单
    143. addHandler(banner,"mouseout",function(){
    144.     subMenu.className="sub-menu hide";
    145. });
    147. //鼠标离开主菜单。隐藏子菜单
    148. addHandler(menuContent,"mouseout",function(){
    149.     subMenu.className="sub-menu hide";
    150. });
    152. //鼠标划入子菜单。显示子菜单
    153. addHandler(subMenu,"mouseover",function(){
    154.     subMenu.className="sub-menu";
    155. });
    157. //鼠标离开子菜单时。隐藏子菜单
    158. addHandler(subMenu,"mouseout",function(){
    159.     subMenu.className="sub-menu hide";
    160. });
    162. //鼠标划入main大盒子  停止轮播
    163. addHandler(main,"mouseover",stopAutoplay);
    165. //鼠标划出main大盒子  开启轮播
    166. addHandler(main,"mouseout",startAutoplay);
    169. //定时器设置自动轮播  第一个参数索引值递增第二个参数就是时间
    170. //开启自动轮播
    171. function startAutoplay(){
    172.     timer=setInterval(function(){
    173.         index++;
    174.         //console.log(index)
    175.         if (index>=size) {index=0}
    176.             changeImg();
    177.     },2000)
    178. }
    184. function changeImg(){
    185.     //便利所有的图片，将图片隐藏起来，将点上的类消除
    186.     for(var i=0;i<size;i++){
    187.         pics[i].style.display="none";
    188.         //数组里面的全部先设置为不显示在下面到了哪里就显示哪个
    189.         dots[i].className="";
    190.         //先设置全部圆点不亮等到下面颠倒哪里圆点就亮哪个
    191.         //这里设置空的话就找不到任何名字就不会显示
    192.     }
    193.     pics[index].style.display="block";
    194.     //小圆点换图设置
    195.     dots[index].className="active";//动态的给她添加高亮样式
    196. }
    197. //把上面的代码封装
    198. //点击下一张按钮显示下一张图片
    199. addHandler(next,"click",function(){
    200.     //单击下一个按钮，是的索引递增
    201.     index++;
    202.     if (index>=size) {index=0};
    203.         changeImg();
    204.     });
    206. //点击上一个按钮显示上一张图片
    207. addHandler(prev,"click",function(){
    208.     //单击上一张按钮，是的索引递减
    209.     index--;
    210.     if (index<0) {index=size-1};
    211.     changeImg();
    212. });
    214. //点击圆点索引切换图片
    215. for(var d=0;d<size;d++){
    216.     //dots[d].id=d;默认给每一个span标签添加名为id的属性 赋值为d  不过这种方式不太好
    217.     //dots[d].id=d;
    218.     //如何添加自定义属性
    219.     dots[d].setAttribute("data-id",d);
    220.     //setAttribute设置属性
    221.     addHandler(dots[d],"click",function(){
    222.         //htis表示当前每一个对象的使用
    223.         index=this.getAttribute("data-id");//因为作用域的问题只能获取最后一个值这里只能得到3
    224.         changeImg();
    225.     });//setAttribute设置getAttribute接收
    226. }
    229. //定时器设置
    230. //图片每间隔几秒就会自动切换一次图片
    231. //当鼠标滑倒轮播图上的时候，消除每间隔几秒切换的效果，清楚定时器
    232. //自动开启轮播
    233. startAutoplay();