轮播

---恢复内容开始---

轮播的基础三要素：能自动翻转内容，能前进后退相应内容，能单击小圆点跳转相应内容；

第一步：实现自动翻转内容：

<div>

</div>

</div>

</div>

</div>

</div>

//设置div格式：

.tu{

float: left;

display: none;

}

然后实现

var jishu=0;

function c(){ // 让当前显示其他隐藏

var a=document.getElementsByClassName("tu");

var d=document.getElementsByClassName("dian");

for(i=0;i<a.length;i++){

if(jishu==i){

a[jishu].style.display="block";

d[jishu].style.backgroundColor="black"

}

else{

a[i].style.display="none";

d[i].style.backgroundColor="wheat"

}

if(jishu==4){

jishu=-1

}

jishu++

}

c();

var dong=setInterval('c()',2000);//动起来

以上可实现第一步，能自动翻转内容，然后做到第二步：前进，后退

<div id="you" onclick="b('you')">》</div> // 设置两个点击单元

定义一个函数：

function b(data){ //左右跳动

clearInterval(dong); //先暂停

if(data=="zuo"){

if(jishu==0){

jishu=3

}

else if(jishu==1){

jishu=4

}

else{

jishu=jishu-2

}

c();

dong=setInterval('c()',2000) //再启动自动跳转画面

}

这一步要注意的地方是，我们在考虑点击操作之前我们要先把第一步的间隔停了，然后完成前进后退后还要开启间隔，这样就会出现两个间隔，例如var dong为全局变量，而函数b里面还有一个局部变量，为了避免混淆，我们把函数里面的局部变量赋值给全局变量，这样下次操作清除间隔的时候就能全部清除！！！！否则会出现越点击跳转越快的尴尬场面，这样一来，第二步算是完成了。

接下来就剩第三步，单击小圆点跳转相应内容：

</div>

function dian(data){ //点击点跳转对应界面

clearInterval(dong);

jishu=data;

c();

dong=setInterval('c()',2000)

}

这样三步就完成了，轮播还有其他更多的操作，例如，当我们想仔细查看页面内容时，这时候需要把页面内容固定，停止跳转，这时候，我们可以在页面上加一个onmouseover，这时候把间隔清除，当鼠标移出内容，恢复间隔。