主要是要把思路理清楚，需要实现什么功能，实现这些功能需要做些什么，怎么做，代码基本上都差不多的，下⾯是轮播图的实现逻辑
js部分，详解写在代码⾥⾯了
var index=0,
导航页源码ElementById('main'),
ElementById('slideProv'),
ElementById('dots').getElementsByTagName('span'),
ElementById('banners').getElementsByTagName('div'),
len=banner.length,
ElementById('menu'),
ElementsByTagName('div'),
ElementById('secondMenu'),
ElementsByTagName('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='';
}
Attribute('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图总数重新开始
//当索引值⼩于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(){
//获取当前⼩圆点的索引值
Attribute('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部分的源码放这⾥了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。