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

时间:2022-11-30 12:28:31

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

功能说明:

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

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

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

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

编程参考:

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

(2) 外层再用一个div,设置宽度为一个图片的宽度,并设置overflowhidden

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

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

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

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

基本实现思路:

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

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

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

导航栏在图片的某一个元素被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>