选项卡
思路
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！
