JS：轮播选项卡
2017-02-23 本文已影响0人
XJBQ
选项卡作为最基础的网页组成部分，已经难以用简单的CSS样式写出相应效果。这时就需要JS（JavaScript）来达到我们想要的效果。
先如图写一个简单的布局吧：
轮播的图片选项卡
<body>
<div id="box">
<a href="javascript:;" id="left"><</a>
<a href="javascript:;" id="right">></a>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol id="ol1">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
其中，
- 两个a标签通过绝对定位到div的两侧，起到翻到上一页或下一页的功能；
- ul中采用5个li并为每一个li中准备好图片或者别的内容；
- ol中5个li设计成5个小圆点则充当索引的功能，并添加active的class赋予被选中后变为橙色的被选中样式。
接下来就是JS代码：
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var oUl=document.getElementById('ul1');
var oOl=document.getElementById('ol1');
var oL=document.getElementById('left');
var oR=document.getElementById('right');
var aUl=oUl.getElementsByTagName('li');
var aOl=oOl.getElementsByTagName('li');
var iNow=0;
首先获取我们所需要用上的所有元素，并设置一个初始值iNow用以充当各组变量的下标，传递各个操作导致变量下标变化的值。
//函数：切换显示内容
function tab(){
for(var i=0; i<aOl.length; i++){
aUl[i].style.display='none';
aOl[i].className='';
};
aUl[iNow].style.display='block';
aOl[iNow].className='active';
};
第一个函数的作用是触发事件后图片内容的切换，在切换前通过for循环操作一组变量清空现有的所有样式，比如小圆点被选中的变色效果及当前显示内容的隐藏，再把所需显示的内容与相对应的索引小圆点样式通过下标iNow切换出来。
//函数：开启图片轮播
function timer(){
oBox.timer=setInterval(function(){
iNow++;
if(iNow==aOl.length){
iNow=0;
};
tab();
},3600);
}
//开启图片轮播，并使轮播在鼠标移入后停止，鼠标移出后开启
timer();
oBox.onmouseover=function(){
clearInterval(oBox.timer);
};
oBox.onmouseout=function(){
timer();
};
这里设置一个定时器，通过每过一段时间，图片所在li及小圆点的li的下标iNow自增，当iNow的值超出下标的范围是归零，再调用切换函数达到选项卡自动轮播的效果。
//鼠标在下方选项卡处选取对应图片
for(var i=0; i<aOl.length; i++){
aOl[i].index=i;
aOl[i].onmouseover=function(){
iNow=this.index;
tab();
};
};
对于一组选项，理所当然的用上for循环，这里则是当鼠标悬停onmouseover到某一小圆点上时，让图片内容及索引效果马上切换到当前小圆点及对应内容上，通过自定义属性获得当前小圆点的下标iNow，然后调用上方切换效果函数即可。
//左右按钮使图片前后切换
oR.onclick=function(){
iNow++;
if(iNow==aOl.length){
iNow=0;
};
tab();
};
oL.onclick=function(){
iNow--;
if(iNow<0){
iNow=aOl.length-1;
};
tab();
};
}
</script>
这个则是左右两个按钮翻页的功能，与自动轮播的机制相似，通过按钮使下标iNow的值+1或-1，再通过切换函数切换内容就行了。
这就是简单的自动轮播选项卡了，要再做到别的动画效果比如常用的无缝滚动则在布局及JS上又有更多的变化，下次讲到运动再做细说。
