javascritp实现简单二级菜单和轮播图

下面是效果图（图片是随便在网上下载的）


主要是要把思路理清楚，需要实现什么功能，实现这些功能需要做些什么，怎么做，代码基本上都差不多的，下面是轮播图的实现逻辑

js部分，详解写在代码里面了

var index=0,
    main=document.getElementById('main'),
    slideNext=document.getElementById('slideNext'),
    slideProv=document.getElementById('slideProv'),
    dot=document.getElementById('dots').getElementsByTagName('span'),
    banner=document.getElementById('banners').getElementsByTagName('div'),
    len=banner.length,
    menu=document.getElementById('menu'),
    menuItem=menu.getElementsByTagName('div'),
    secondMenu=document.getElementById('secondMenu'),
    secondMenuItem=secondMenu.getElementsByTagName('div'),
    menuItemLen=menuItem.length;

//鼠标滑上该索引的一级菜单时显示相应的二级菜单，隐藏其他已显示的二级菜单
for (var s=0;s<menuItemLen;s++){
     //遍历所有的一级菜单
    menuItem[s].setAttribute('sid',s);//为一级菜单添加自定义属性
    menuItem[s].addEventListener('mouseover',function () {
     //绑定事件
        for (var a=0;a<menuItemLen;a++){
     //鼠标滑上时取消所有二级菜单的class，使其隐藏
            secondMenuItem[index].className='';
        }
        index=this.getAttribute('sid');//索引值等于属性值，获取当前鼠标滑上的具体是哪一个一级菜单
        secondMenu.style.display='block';//显示二级菜单
        secondMenuItem[index].className='state'//显示一级菜单对应的二级菜单
    });
}

//鼠标滑上二级菜单时二级菜单继续显示
secondMenu.addEventListener('mouseover',function () {
     
    secondMenu.style.display='block';
    secondMenuItem[index].className='state';
});
//鼠标离开一级菜单时二级菜单隐藏
menu.addEventListener('mouseout',function () {
     
    secondMenu.style.display='none';
    secondMenuItem[index].className='';
});
//鼠标二级菜单时，二级菜单隐藏
secondMenu.addEventListener('mouseout',function () {
     
    secondMenu.style.display='none';
});


//1.只显示当前索引的小圆点
// 2.只显示当前索引的banner图
function changeImg(){
     
    //遍历所有的图片和小圆点
    for(var i=0;i<len;i++){
     
        //将遍历的所有图片都隐藏
        banner[i].style.display="none";
        //将遍历的所有小圆点都取消class,保持默认的背景颜色
        dot[i].className=" ";
    }
    //让当前索引值的banner图显示
    banner[index].style.display="block";
    //为当前索引的小圆点加上class,改变背景颜色
    dot[index].className='light';
}

//点击切换下一张
slideNext.addEventListener('click',function () {
     
    index++;
    //当索引值大于banner图数量时从0重新开始
    if(index>=len) {
     index=0;}
        changeImg();
});
//点击切换上一张
slideProv.addEventListener('click',function () {
     
    index--;
    //当索引值小于0时从banner图总数重新开始
    if(index<0) {
     index=len-1;}
    changeImg();
});

//点击小圆点切换到相应的banner图
    for(var i=0;i<len;i++) {
     
        //遍历所有的小圆点，并给他们加上自定义属性（让属性值=索引值就能确定绑定点击事件后点击的是哪个小圆点）
         dot[i].setAttribute('newId',i);
         //给每个小圆点添加点击事件
         dot[i].addEventListener('click',function () {
     
             //获取当前小圆点的索引值
             index=this.getAttribute('newId');
             changeImg();
         })
    }
//banner图自动轮播
function time(){
     
    times=setInterval(function () {
     
        index++;
        if(index>=len) {
     index=0;}
        changeImg();
    },3000);
}
time();
    //鼠标滑上banner图停止自动轮播
main.addEventListener('mouseover',function () {
     
    clearInterval(times);
});
//鼠标滑下轮播图继续开始自动轮播
main.addEventListener('mouseout',function () {
     
           time();
    });

刚开始学自己写着玩的包括HTML和css部分的源码放这里了javascript实现轮播图和简单二级菜单