简要分析javascript的选项卡和轮播图

选项卡

思路

1、按钮和展示的页面要对应：分别遍历，记住当前按钮的索引，让其成为展示页面的索引

2、只出现所对应的页面：所有的页面隐藏，只展示想要的页面

只展示js代码

for(var i=0;i<input.length;i++){
input[i].index=i           //让浏览器解析HTML文档时,保存每一个input的索引
input[i].onclick=function(){
for(var j=0;j<div.length;j++){   //所有的div为隐藏
div[j].style.display='none'
input[j].className=''
}
div[this.index].style.display='block' //只展示对应的页面
this.className='active'
}
}

轮播图

思路

一个完整的轮播图包含：自动播放；鼠标移入移除开始暂停；两边的按钮；下面的小轮播点

自动播放：涉及到定时器，

移入移除：mouseover和mouseout事件，开始/取消定时器

两边的按钮：左右移动，++--，图片和轮播点相对应

下面的轮播点：和选项卡差不多

整体的思路和选项卡差不多，但细微处还是得注意

规定

imDiv为图片div的集合

imgSpan为小轮播点的集合

one为右键two为左键

代码

function changeImage(){
for(var i=0;i<imDiv.length;i++){
imDiv[i].style.display='none'
imgSpan[i].style.background='#ccc'
}
imDiv[index].style.display='block'
imgSpan[index].style.background='green'
}

这一部分为改变图片和小轮播点的变色：原理和轮播图一样，先让所有的消失和原来的颜色；注意这里的index一开始为0

for(var i=0;i<imgSpan.length;i++){
imgSpan[i].id=i
imgSpan[i].onclick=function(){
index=this.id
changeImage()
}
}

这里部分为小轮播点的点击事件，为了让其对应相应的图片，可使用id或者自己setAttribute属性来记住索引，再执行轮播图片的对应代码

images.onmouseover=function(){
clearInterval(timer)
}
images.onmouseout=function(){
timer=setInterval(function(){
index++
if(index>=imDiv.length){
index=0
}
changeImage()

},2000)
}
images.onmouseout()

这里的代码是mouseover和mouseout事件，注意这里的if条件，防止超出应有的图片；后面的img.onmouseout直接自执行，一开始就执行

one.onclick=function(){
index++
if(index>=imDiv.length){
index=0
}
changeImage()
}
two.onclick=function(){
index--
if(index<=0){
index=2
}
changeImage()
}

这里的代码是两边的按钮点击事件，原理都是一样的；因为当你点击的时候，这里的定时器依然是在运行的，造成不好的用户体验；可以让其mouseover和mouseout让定时器关闭和开始，达到良好的用户体验。

总结

第一：不管是选项卡，还是轮播图，思路大致一样，都是先隐藏，谁该出现谁就出现；

第二：轮播图的播放封装成一个函数，有需求直接调用即可

第三：注意索引的对应，属性的灵活应用

第四：爱上原生JavaScript。

pretty funny！