轮播
---恢复内容开始---
轮播的基础三要素：能自动翻转内容，能前进后退相应内容，能单击小圆点跳转相应内容；
第一步：实现自动翻转内容：
<div>
<div class="tu">
<img src="image/QQ图片20181229095725.jpg" width="100%"/>
</div>
<div class="tu">
<img src="image/QQ图片20181229095802.jpg" width="100%"/>
</div>
<div class="tu">
<img src="image/QQ图片20181229095816.jpg" width="100%"/>
</div>
<div class="tu">
<img src="image/QQ图片20181229095908.jpg" width="100%"/>
</div>
<div class="tu">
<img src="image/QQ图片20181229100011.jpg" width="100%"/>
</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="zuo" onclick="b('zuo')">《</div>
<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 id="dian">
<div class="dian" onclick="dian(0)"></div>
<div class="dian" onclick="dian(1)"></div>
<div class="dian" onclick="dian(2)"></div>
<div class="dian" onclick="dian(3)"></div>
<div class="dian" onclick="dian(4)"></div>
</div>
function dian(data){ //点击点跳转对应界面
clearInterval(dong);
jishu=data;
c();
dong=setInterval('c()',2000)
}
这样三步就完成了，轮播还有其他更多的操作，例如，当我们想仔细查看页面内容时，这时候需要把页面内容固定，停止跳转，这时候，我们可以在页面上加一个onmouseover，这时候把间隔清除，当鼠标移出内容，恢复间隔。
