js实验2.(1)幻灯片切换实现

来源：互联网发布：网络黑彩票代理犯法吗编辑：程序博客网时间：2024/05/21 09:43

1、制作幻灯片显示（参考html实验8的第4题）

功能说明：

(1) 用setTimeout制作幻灯片动画。装载网页后自动播放幻灯片。具体见slider.mp4

(2) 当mouseover图片时，显示左右箭头，并停止动画。当mouseout画面时，隐藏左右箭头，重新启动动画。

(3) 每次点击左箭头将移动一副图像。

(4) 右下角的三个点每个点对应一幅图像，当前图像的变化时所对应的点也会变化。点击它们时会显示对应的图像。

编程参考：

(1) 图片采用三个img，并用div包含，样式white-space要加上nowrap。

(2) 外层再用一个div，设置宽度为一个图片的宽度，并设置overflow为hidden。

(3) 上面的两个div均为relative。

(4) 每个点和箭头采用div和背景图实现，三个点采用一个div封装，该div和两个箭头的div均采用绝对定位。

(5) 通过增加class或删除class实现三个点中活动点的切换。

* 所用方法: querySelector()，querySelectorAll()，classList.add()，classList.remove()

基本实现思路：

通过一个时间数值t，每过一定时间t会增加，到达刚好切换进一张完整图片的时候，用一个stay值让它停留片刻。

3个导航点，根据选择的哪张图片(choose函数)来决定哪个点应该使用红色，不过要注意点的图片资源是这样的：

导航栏在图片的某一个元素被mouseover事件触发时就出现，否则隐藏：

完整实现代码如下：

<!DOCTYPE html><html><head><title>Slider</title>    <style>        #slideMain {            top:130px;        left:440px;            padding: 0;            height:300px;            width:440px;            overflow:hidden;            position:relative;        }        .slides {        position:absolute;            height:300px;            width:2000px;        }        .slide {            height:300px;            width:440px;            float: left;        }        .Point,.Arrow {        position:absolute;        }        #point1 {        top:410px;        left:825px;        height:12px;        width:12px;        overflow:hidden;        position:absolute;        }        #point2 {        top:410px;        left:840px;        height:12px;        width:12px;overflow:hidden;        position:absolute;        }        #point3 {        top:410px;        left:855px;        height:12px;        width:12px;        overflow:hidden;        position:absolute;        }        #arrow1 {        top:260px;        left:480px;        height:80px;        width:30px;        overflow:hidden;        position:absolute;        }        #arrow2 {        top:260px;        left:840px;        height:80px;        width:30px;overflow:hidden;        position:absolute;        }        #arrow21{        top:-80px;        }    </style></head><body>    <div id="slideMain">        <div id="h" class="slides">            <img id="img1" class="slide" src="images/img1.jpg">            <img id="img2" class="slide" src="images/img2.jpg">            <img id="img3" class="slide" src="images/img3.jpg">            <img id="img1" class="slide" src="images/img1.jpg">        </div>    </div>    <div id="point1">    <img id="point11" class="Point" src="images/navigator.png">    </div>    <div id="point2">    <img id="point21" class="Point" src="images/navigator.png">    </div>    <div id="point3">    <img id="point31" class="Point" src="images/navigator.png">    </div>    <div id="arrow1">    <img id="arrow11" class="Arrow" src="images/arrows-30.png">    </div>    <div id="arrow2">    <img id="arrow21" class="Arrow" src="images/arrows-30.png">    </div>   </body> <script> var t=0; var id; var stay=0; var judge=1; var p1 = document.getElementById("point11"); var p2 = document.getElementById("point21"); var p3 = document.getElementById("point31"); var a1 = document.getElementById("arrow11"); var a2 = document.getElementById("arrow21"); a1.style.visibility="hidden";//当鼠标放在图片上时箭头才出现 a2.style.visibility="hidden"; function choose(pos){ //展现的图片,这个函数维护点 if(pos==1){      //注意到这里的每一个点都是12*36的，最下面的那个点才是红色的 p1.style.top=-24+ "px"; //减去24，刚好展现红色点 p2.style.top=0+ "px"; p3.style.top=0+ "px"; } else if(pos==2){ p1.style.top=0+ "px"; p2.style.top=-24+ "px"; p3.style.top=0+ "px"; } else{ p1.style.top=0+ "px"; p2.style.top=0+ "px"; p3.style.top=-24+ "px"; } } function clock(){ if(t!=0&&t!=-440&&t!=-880&&t!=-1320){ //每张图宽440px t=t-5; } else{ stay=stay+judge; //这张图片刚刚切换进来的时候停留一定的时间 }  if(stay==80){  t=t-5; stay=0; }  if(t==-1320){//计算满了，重新计数 t=0; }  if(t==0||(t<-880&&t>=-1320)){ choose(1); } else if(t<-0&&t>=-440){ choose(2); } else{ choose(3); }  var h = document.getElementById("h");  h.style.left = t+ "px";//图片切换时慢慢往左移动 id=setTimeout(clock,10); //每10ms执行一次 }   clock(); var img1=document.getElementById("img1"); var img2=document.getElementById("img2"); var img3=document.getElementById("img3"); var hander = function (event) { //绑定图上所有元素 switch (event.type) {case "mouseover": //在图上，箭头出现judge=0; document.getElementById("arrow11").style.visibility="visible"; document.getElementById("arrow21").style.visibility="visible";break; case "mouseout":  //离开图，箭头隐藏 judge=1;document.getElementById("arrow11").style.visibility="hidden";document.getElementById("arrow21").style.visibility="hidden"; break; } }; a1.onclick=function (){ //对左箭头进行点击 t=t+440; if(t>0){ t=-880; } if(t==0||(t<-880&&t>=-1320)){ choose(1); } else if(t<-0&&t>=-440){ choose(2); } else{ choose(3); } }; a2.onclick=function (){ t=t-440; if(t<-1320){ t=0; } if(t==0||(t<-880&&t>=-1320)){ choose(1); } else if(t<-0&&t>=-440){ choose(2); } else{ choose(3); } };  p1.onclick=function (){ //点击第一个圆点选择第一张图片 t=0;choose(1);     }; p2.onclick=function (){//点击第二个圆点选择第二张图片 t=-440;choose(2);  };  p3.onclick=function (){//点击第三个圆点选择第三张图片 t=-880;choose(3);  }; a1.onmouseover=hander; a1.onmouseout=hander; a2.onmouseover=hander; a2.onmouseout=hander; p1.onmouseover=hander; p1.onmouseout=hander; p2.onmouseover=hander; p2.onmouseout=hander; p3.onmouseover=hander; p3.onmouseout=hander; img1.onmouseover=hander; img1.onmouseout=hander; img2.onmouseover=hander; img2.onmouseout=hander; img3.onmouseover=hander; img3.onmouseout=hander; </script></html>

0 0