幻灯片走起来

上次我们留下来了一个手机端的样式对不对，下午我们在专心剖析为什么不现在呢？我也不知道为什么，只是觉得时间不对    楼主你是不是里面有很多自己也不知道，是的啊，感觉在这条路上我好多不会。。。

最简单的幻灯片开始：

style:

.content{position: relative;width: 1200px;height: 600px;}
h3{position: absolute;left:10px;top: 560px;width: 1140px;background-color: #aaa;height: 40px;line-height: 40px;opacity: 0.1;display: none;}
div.button{width: 50px;position: absolute;top: 560px;left: 1155px;}
span{float: left;width:18px;height:18px;margin-bottom:2px;margin-right:2px;background-color: #aaa;display: block;}

html:

<div class="content" style="margin:auto">
   <img src="./image/0.jpg" alt="第一张图" style="width: 100%;height: auto;">
   <h3>你好，谢谢这是第一张图</h3>
   <h3>你好，谢谢这是第二张图</h3>
   <h3>你好，谢谢这是第三张图</h3>
   <h3>你好，谢谢这是第四张图</h3>
   <div class="button">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
   </div>
</div>

JS核心部分：

οnlοad=show;
function show () {
var a=0;
var img=document.getElementsByTagName("img")[0];
var h3=document.getElementsByTagName("h3");
var span=document.getElementsByTagName("span");
var t=setInterval(showPicture,2000);
function showPicture() {
img.src="./image/"+a+".jpg";

for (var i = 0; i<h3.length; i++) {
if(a==i){
h3[i].style.cssText="display:block";
span[i].style.cssText="background-color:#EE2C2C;"
}
else{
h3[i].style.cssText="display:none";
span[i].style.cssText="background-color:#fff;"
}
}
if (a<3) {a++;}else{a=0;}
}
span[0].οnmοuseοver=function(){a=0;showPicture();}
span[1].οnmοuseοver=function(){a=1;showPicture();}
span[2].οnmοuseοver=function(){a=2;showPicture();}
span[3].οnmοuseοver=function(){a=3;showPicture();}
}

我们今天先把这个简单的幻灯片JS一句句解析：

onload  家在完成以后执行；

document.getElementsBy(这里可以是id  name 标签等)获取你需要的元素；

今天的重点setInterval，这个东西可不是一般的好东西，计时器：

setInterval（你需要调用的函数或者代码串官方，这个位子我理解的是方法和函数体；后面紧跟时间，单位一定要记清楚“毫秒”）！

时间间隔可以用setInterval创建可以通过clearInterval来结束。

后面都应该好理解！我本人还没有接触到jquery，这一次没有jquery幻灯片全部都是原生态js！

幻灯片深入：

我们群主写了一篇博文今天的事情就是把他写的厉害的幻灯片我们进行剖析。

代码因为学习引用别人的我们这个位子就必须截美图来分析：

JS：

大家先仔细看这些代码，里面囊括了很多知识点！我呢也在为它的所有解释在做详细的说明！