js计时器实现图片的无缝轮播和简单的图片切换轮播

一时失言乱红尘 2021-10-23 13:20 320阅读 0赞

> 几个注意事项：  
> ① 给某一标签设置了固定定位后，设置width:100%是以浏览器做参考的。  
> ② 给某一元素设置了绝对定位时，且父元素未设置定位，会去找离该元素最近的已定位的祖先元素，设置定位时以该祖先元素为参考点，设置高和宽时也是以该祖先元素为参考点。  
> ③ 给某一元素设置了相对定位时，设置宽高百分比时还是以父元素为参考（无论父元素有没有设置定位）  
> ④ 当给某一元素设置了固定定位/绝对定位时，若它的子元素设置了浮动，该浮动子元素也能撑开父元素。但若是给该元素设置了相对定位，则浮动的子元素仍不能撑开父元素

###### 案例1： 横轴轮播 ######

> 功能：四张图片可实现横轴轮播，且当鼠标移到图片上时，暂停。当移出时，继续轮播

> 思想：  
> **方法①**：将两个完全一样的div（分别放置四张图片）放到一个足够宽（可以容纳下两个div）的div(方便起见，交div1)中，外层div的父容器设置超出部分隐藏，对div1绑定一个计时器，每10ms让滚动条向右滚动1px(`scrollLeft+=speed`)。当滚动到两个子div的交界处时，再设置`scrollLeft=0`,让div1从头重新开始滚动。由于在改变`scrollLeft`前的可视区域和改变后的可视区域完全相同，故不会有抖动效果。此时看起来是两个div向圆一样连接到一起，实际上不是，只是时间过快，人眼感觉到并没有变化。  
> **方法②**：设置滚动的临界值（即`scrollLeft`的临界值），在一个div中放置的多张图片的顺序根据临界值来决定。必须保证在`scrollLeft`变化前和变化后的可视区域的图片时一致的。

###### 效果图： ######

![在这里插入图片描述][20190814175237160.gif]

###### 完整代码 ######

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style> .all{ width: 850px; height: 200px; overflow: hidden; overflow-x:scroll; } .container{ /* 为了让one和two放到一行。必须有一个父容器的宽和两个的宽之和相同*/ width:2400px; height: 200px; } .one,.two{ width: 1800px; height: 100%; float: left; } .one img,.two img{ width: 300px; height: 100%; float: left; } </style>
    <body>
    <div class="all">
        <div class="container">
            <div class ="one">
                <img src="img/1.jpg" alt=""/>
                <img src="img/2.jpg" alt=""/>
                <img src="img/3.jpg" alt=""/>
            </div>
          	<div class ="two">
       		</div>
        </div>
        </div>
    </body>
    <script> var all = document.getElementsByClassName("all")[0]; var one = document.getElementsByClassName("one")[0]; var two = document.getElementsByClassName("two")[0]; two.innerHTML=one.innerHTML var speed = 1; function scrollX () { if(all.scrollLeft>1200){ all.scrollLeft = 0; } all.scrollLeft +=speed; } var timer = setInterval("scrollX()",10); all.onmouseenter = function(){ clearInterval(timer); } all.onmouseleave = function () { timer = setInterval("scrollX()",10)//当创建多个计时器时，且不移除时，速度会越来越快 } </script>
    </html>

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style> .all{ width: 850px; height: 200px; overflow: hidden; overflow-x:scroll; } .container{ /* 为了让one和two放到一行。必须有一个父容器的宽和两个的宽之和相同*/ width:2400px; height: 200px; } .one,.two{ width: 1800px; height: 100%; float: left; } .one img,.two img{ width: 300px; height: 100%; float: left; } </style>
    <body>
    <div class="all">
        <div class="container">
            <div class ="one">
                <img src="img/1.jpg" alt=""/>
                <img src="img/2.jpg" alt=""/>
                <img src="img/3.jpg" alt=""/>
                <img src="img/1.jpg" alt=""/>
                <img src="img/2.jpg" alt=""/>
                <img src="img/3.jpg" alt=""/>
            </div>
        </div>
        </div>
    </body>
    <script> var all = document.getElementsByClassName("all")[0]; var one = document.getElementsByClassName("one")[0]; var two = document.getElementsByClassName("two")[0]; var speed = 1; function scrollX () { //临界值为900，故one中添加三张和前三张完全相同的图片对象 if(all.scrollLeft>900){ all.scrollLeft = 0; } all.scrollLeft +=speed; } var timer = setInterval("scrollX()",10); all.onmouseenter = function(){ clearInterval(timer); } all.onmouseleave = function () { timer = setInterval("scrollX()",10) } </script>
    </html>

###### 案例2：切换图片的轮播效果 ######

> 功能：四张图片进行切换轮播，当鼠标放置某一张图片上时，暂停，到移出时，继续轮播。在图片轮播时，该图片对应的底部圆圈会被填充为红色，其余为透明。也可以点击左右按钮进行切换。

> 思想：根据索引对索引的方法，实现图片切换时底部圆圈也跟着切换。也是运用该方法实现左右按钮向前向后切换图片的功能。在该案例中要注意：当点击右边切换按钮时，当切换完第四张照片后需要将第一个图片对象设为下一个要切换的元素（而不是正常的++）。当点击左边切换按钮时，也需要判断：当切换完第一张图片后，需要将即将切换的元素设为第四个图片对象（而不是正常的–）。

###### 效果图： ######

![在这里插入图片描述][20190814175056533.gif]

###### 完整代码 ######

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style> .container{ width: 700px; height: 300px; position: relative; } .container img{ width: 100%; height: 100%; } .circle{ position: absolute; bottom:10px; left:300px; } .container>.circle>span{ display: inline-block; border-radius: 50%; border: 1px solid white; width:10px; height: 10px; } .nav{ width: 700px; position: absolute; top:130px; } .nav .left,.nav .right{ background: white; cursor: pointer; } .nav .left{ float: left; } .nav .right{ float: right; } </style>
    <body>
    <div class="container">
        <img src="img/1.jpg"/>
        <div class="circle">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="nav">
            <span class="left"><</span>
            <span class="right">></span>
        </div>
    </div>
    <script> var container = document.getElementsByClassName("container")[0]; var img = document.getElementsByClassName("container")[0].children[0]; var circle=document.getElementsByClassName("circle")[0]; var spanList = circle.children; var nav = document.getElementsByClassName("nav")[0]; var i=1; spanList[0].style.backgroundColor = "red"; function trans(){ /*切换图片*/ i++; if(i>4){ i=1; } back(i); img.src="img/"+i+".jpg"; } var timer = setInterval("trans()",1000); function back(i){ /*当切换到哪张图片时，底部圆圈的背景变红，其余背景透明*/ console.log(i) for(var j=0;j<spanList.length;j++){ if(i-1==j){ spanList[j].style.backgroundColor = "red"; }else{ spanList[j].style.backgroundColor = "transparent"; } } } container.onmouseenter= function () { /*鼠标移上去时，清除计时器*/ clearInterval(timer) } container.onmouseleave = function(){ /*鼠标移出时，设置计时器。注意~~~必须设置的名称和之前的名称相同！！！！*/ timer = setInterval("trans()",1000); } for(var j=0;j<nav.children.length;j++){ nav.children[j].value = j; nav.children[j].onclick = function(){ /*绑定左右按钮点击事件（切换图片）*/ if(this.value==0){ i--; } else{ i++; } if(i<=0){ i=4; } else if(i>4){ i=1; } img.src = "img/"+i+".jpg"; back(i); } } </script>
    </body>
    </html>

[20190814175237160.gif]: /images/20211023/c1d7855ffa6a424b8011cac8832f2988.png
[20190814175056533.gif]: /images/20211023/fa3d5824b9014130b30b91c55dc31408.png