js 轮播专题 —— 三维轮播、淡入淡出、横轴轮播

向右看齐 2021-10-24 01:26 491阅读 0赞

###### 在进入正题前，先来总结下在三个案例中遇到的问题 ######

> ① 当要实现淡入淡出功能时，必须要将动画的触发源设为`opacity`的变化，若将该属性放入一个类中，是不可的  
> ② 在设置计时器以及动画时，计时器中的时间是等待将该事件放入等待队列中的时间，而当从状态一变到状态二所用时间是动画的执行时间。  
> ③ 当有图片位置移动时，若有过渡，则会有抖动。故当也要移动图片前，先去除抖动，再移动图片。  
> ④ 当底部圆圈在父元素中时，只需要给父元素添加鼠标移进清除计时器以及鼠标移出时添加计时器。不能给子父元素都设置，否则会有计时器添加和清除的冲突，且可能会有计时器叠加的情况。

###### 1、 三维轮播 ######

> 功能：鼠标进入图片和底部圆圈时，停止动画。且当鼠标移上哪个圆圈时，该圆圈的背景色变白，该圆圈对应的图片作为中心位展示

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

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

> 步骤：  
> ①先做普通的轮播（默认是顺时针方向）：根据`z-index`和`position`取值的切换完成轮播。当前元素往往是取自己后一个元素的层和位置的取值。而数组中的最后一个元素取索引为零的元素的层和位置的值。（在这里注意：在进行重新赋值前必须要先存下第0个元素的相关信息，且for循环是从0到数组的边界，而不能从边界到0递减进行循环）  
> ② 在轮播中，会出现顺时针和逆时针方向的旋转：顺时针为步骤①，逆时针则与其相反，即从数组的边界到0递减循环，要实现的则是当前元素取前一个元素的层和位置信息作为自己的新值。  
> ③ 实现点与图片的对应：利用索引对索引的方式，即遍历图片数组，寻找出当前`z-index`值最大的元素，将其索引对应的点的背景色变为白色。并将当前背景变为白色的点的索引记录下来（`selectIndex`）  
> ④ 实现鼠标放置某一个点上，将其对应的图片的`z-index`设为最大。此时便要要到③记录的点的索引，用当前鼠标移动到的点的索引与`selectIndex`相减。如果当前指向的点的索引减去`selectIndex`的值为负数或5或0时，顺时针旋转，其余情况则逆时针旋转。由于要进行顺时针和逆时针的判断，则在调用`setPostion`方法时需要传参`count`进去。而对于正常的轮播，则传入0进去即可（让其做顺时针旋转）  
> ⑤ 在做④时，需要注意：若鼠标移出点后又移进相同的点时，不做任何操作。（通过`this.index !== selectIndex`条件来实现）  
> ⑥ 在做点的切换时，会出现前面一个点的动画还未开始，后一个点的动画便开始，最后会出现计时器累加的情况（此处每个点的切换分别用了一个一次性定时器）。故需要在下一次点切换前判断上一次动画是否完成（用变量`isAnimate`来判断，若其为true代表上一次动画已经结束，若为false，则未结束，则不开始这次点的切换，即return 。注意：在这里先将基础轮播的计时器清除后再做一切判断）  
> ⑦ 在做点的切换时注意：必须要在旋转`count`次后再设置点的背景颜色。

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

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <link href="3D.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <div class="banner">
        <div class="imgList" style="top: 150px;left:250px;z-index:5;">
            <img src="img/1.jpg"/>
        </div>
        <div class="imgList" style="top:100px;left: 0;z-index:3 ">
            <img src="img/2.jpg"/>
        </div>
        <div class="imgList" style="top:55px;left: 0;z-index:2 ">
            <img src="img/3.jpg"/>
        </div>
        <div class="imgList" style="top:0;left: 250px;z-index:0 ">
            <img src="img/4.jpg"/>
        </div>
        <div class="imgList" style="top:55px;left:500px;z-index:2 ">
            <img src="img/5.jpg"/>
        </div>
        <div class="imgList" style="top:100px;left:500px;z-index:3 ">
            <img src="img/6.jpg"/>
        </div>
        <div class="lingxing">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script> var imgList = document.getElementsByClassName("imgList"); var lingxing = document.getElementsByClassName("lingxing")[0].children; var num = 1; var timer = null; beginTime(); var timer2; function beginTime() { timer = setInterval(function () { setPosition(0); setColor(); }, 1000); } var isAnimate = true; function setPosition(count) { //初始轮播 if (count <= 0) { //顺时针旋转 var zeroIndex = [imgList[0].style.top, imgList[0].style.left, imgList[0].style.zIndex]; for (var i = 0; i < imgList.length; i++) { if (i == 5) { imgList[i].style.top = zeroIndex[0]; imgList[i].style.left = zeroIndex[1]; imgList[i].style.zIndex = zeroIndex[2]; } else { imgList[i].style.top = imgList[i + 1].style.top; imgList[i].style.left = imgList[i + 1].style.left; imgList[i].style.zIndex = imgList[i + 1].style.zIndex; } } } else { //逆时针旋转 var lastIndex = [imgList[imgList.length - 1].style.top, imgList[imgList.length - 1].style.left, imgList[imgList.length - 1].style.zIndex] for (var i = imgList.length - 1; i >= 0; i--) { if (i == 0) { imgList[i].style.top = lastIndex[0]; imgList[i].style.left = lastIndex[1]; imgList[i].style.zIndex = lastIndex[2]; } else { imgList[i].style.top = imgList[i - 1].style.top; imgList[i].style.left = imgList[i - 1].style.left; imgList[i].style.zIndex = imgList[i - 1].style.zIndex; } } } } var selectIndex = 0; lingxing[0].className = "bgColor"; function setColor() { for (var j = 0; j < imgList.length; j++) { //索引对索引，让某一张图片的index对应的lingxing对象的背景变为白色 if (imgList[j].style.zIndex == 5) { lingxing[j].className = "bgColor"; selectIndex = j; } else { lingxing[j].className = "" } } } for (var j = 0; j < lingxing.length; j++) { //鼠标进入和离开事件 lingxing[j].index = j; lingxing[j].onmouseenter = function () { clearTimeout(timer); if (isAnimate) { //判断上次动画是否完成 isAnimate = false; } else { console.log("动画未完成"); isAnimate = true; return; } num = 1; if (this.index !== selectIndex) { var countNum = this.index - selectIndex; setTimeout(test(countNum),1500); function test(countNum) { if(countNum==5){ countNum=-1 } if (num > Math.abs(countNum)) { console.log("动画完成"); num = 0; isAnimate = true; return; } num++; setPosition(countNum); setTimeout(test(countNum), 1500); } selectIndex = this.index; setColor(); } }; imgList[j].onmouseenter = function () { clearTimeout(timer) }; imgList[j].onmouseleave = function () { beginTime(); }; lingxing[j].onmouseleave = function () { beginTime(); } } </script>
    </body>
    </html>

/*3D.css*/
    body{ 
        background: black;
    }
    .banner{ 
        position: relative;
        width: 900px;
        height: 350px;
        margin: auto;
        border: 1px solid #fff;
    }
    .banner .imgList{ 
        position: absolute;
        width: 400px;
        height: 200px;
        box-shadow: 0 0 5px white;
        transition: all .2s linear;
    }
    .imgList img{ 
        width: 100%;
        height: 100%;
    }
    .lingxing{ 
        position: absolute;
        bottom: -40px;
        text-align: center;
        width: 100%;
    }
    .lingxing span{ 
        display: inline-block;
        border: 1px solid white;
        transform: rotate(45deg);
        height: 15px;
        width: 15px;
        margin-left: 10px;
    }
    .bgColor{ 
        background: greenyellow;
    }

###### 2. 淡入淡出 ######

###### 效果图：![在这里插入图片描述][20190819200432262.gif] ######

> 功能：可实现简单的图片淡入淡出的轮播效果。当点击左右按钮时，可切换到上一张/下一张。

> 步骤：  
> ① 先给每个图片元素设置默认的`z-index`（第一个图片元素为5，第二个为4，以此类推），且默认设置第一个图片元素的`opacity`为1。  
> ② 初始动画：在变化时默认（`left`）是当前元素取上一次元素的`z-index`为新的`z-index`值（第0张取图片集合的最后一张图片的`z-index`为新值），当展示哪一张时，哪一张图片的`opacity`为1。在变化`opactiy`时，需要给该图片元素加入动画，从而达到淡入淡出的效果。在这里注意：设置`opacity`时，不能给被选中的图片元素加类，这样不会有淡入淡出的效果  
> ③ 设置底部圆圈与图片对应：当图片切换时，该图片对应的圆圈的背景色变为白色，其余为无。（遍历图片集合，取到`z-index`为最大的索引，记录该索引，将该索引对应的圆圈的背景色设置为为白色）  
> ④ 设置图片所在div的移入和移出事件。移入时清除计时器，移出时设置计时器`timer`。  
> ⑤ 不能给圆圈设置移入时清除计时器，移出时设置计时器（圆圈集合是大div的子元素）：当离开圆圈但还在图片上时，仍设置定时器，也会触发父元素的清除计时器操作，此时如果在圆圈上操作过快有可能会有计时器叠加的情况（冒泡引起，但也不能清除冒泡，若阻塞冒泡，在离开圆圈但还在图片上时，不能清除计时器，反而最后会有计时器叠加的情况）。  
> ⑥ 左右按钮点击事件：点击左边按钮时，图片变化和默认淡入淡出方向相同，但点击右边按钮时，当前元素需要取下一个元素的相应值作为新值。而图片元素集合中的最后一个图片元素将索引为0的图片元素的相关数据作为自己的新值。  
> ⑦ ！！！！在该案例中需要注意：在鼠标放到某一圆圈上时，将该count值传给移动的函数，进行for循环，在执行完后，才是最终的结果。若不通过for循环的方式，则无法控制鼠标指向的圆圈的背景变白的时间。

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style> .all { position: relative; width: 600px; height: 400px; margin: auto; } .nav { width: 100%; height: 100%; position: relative; } .nav img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: all 0.5s ease-in-out; } .setOpa { opacity: 1; } .setDian { position: absolute; bottom: 20px; left: 0; right: 0; margin: auto; z-index: 10; width: 200px; text-align: center; } .setDian span { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid white; box-shadow: 0 0 4px 2px white; } .btn{ position:absolute; width: 100%; top:180px; height: 40px; z-index: 10; } .btn .right,.btn .left{ width: 20px; height: 20px; border: 1px solid black; background: rgba(100,100,100,.8); text-align: center; color: white; line-height: 18px; } .left{ border-radius: 0 50% 50% 0; float: left; } .right{ border-radius: 50% 0 0 50%; float: right; } </style>
    <body>
    <div class="all">
        <div class="nav">
            <img src="img/1.jpg" class="imgList" style="z-index:5"/>
            <img src="img/2.jpg" class="imgList" style="z-index:4"/>
            <img src="img/3.jpg" class="imgList" style="z-index:3"/>
            <img src="img/4.jpg" class="imgList" style="z-index:2"/>
            <img src="img/5.jpg" class="imgList" style="z-index:1"/>
            <img src="img/6.jpg" class="imgList" style="z-index:0"/>
        </div>
        <div class="setDian">
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
        </div>
        <div class="btn">
            <div class="left"><</div>
            <div class="right">></div>
        </div>
    </div>
    <script> var nav = document.getElementsByClassName("nav")[0]; var all = document.getElementsByClassName("all")[0]; var imgList = document.getElementsByClassName("imgList"); var maxZIndex; var timer; var dian = document.getElementsByClassName("dian"); var btnChild = document.getElementsByClassName("btn")[0].children; dian[0].style.background = "white"; setTimer(); function setOpa(count,direction) { //设置z-index和opacity for(var K=0;K<count;K++){ //若不写count，会闪 if(direction=="left"){ var lastIndex = [imgList[imgList.length - 1].style.zIndex]; for (var i = imgList.length - 1; i >= 0; i--) { if (i == 0) { imgList[i].style.zIndex = lastIndex[0] } else { imgList[i].style.zIndex = imgList[i - 1].style.zIndex } if (imgList[i].style.zIndex == 5) { //只有直接赋值opacity有渐变的效果 // imgList[i].className="setOpa imgList" imgList[i].style.opacity = 1; maxZIndex = i; } else { // imgList[i].className="imgList" imgList[i].style.opacity = 0; } } }else{ var lastIndex = [imgList[0].style.zIndex]; for (var i = 0; i<imgList.length;i++) { if (i == 5) { imgList[i].style.zIndex = lastIndex[0] } else { imgList[i].style.zIndex = imgList[i + 1].style.zIndex } if (imgList[i].style.zIndex == 5) { //只有直接赋值opacity有渐变的效果 // imgList[i].className="setOpa imgList" imgList[i].style.opacity = 1; maxZIndex = i; } else { // imgList[i].className="imgList" imgList[i].style.opacity = 0; } } } } } function setTimer() { timer = setInterval(function () { setOpa(1,"left");//虽然已经将各个层设置好，但是还需要经过500ms的过渡才算真正设置好 setTimeout(setDian, 200) }, 1000); } function setDian() { //点对应图片 for (var i = 0; i < dian.length; i++) { if (i == maxZIndex) { dian[i].style.background = "white" } else { dian[i].style.background = "" } } } //鼠标进入和移出事件 all.onmouseenter=function () { clearInterval(timer); } all.onmouseleave=function () { setTimer() } for (var j = 0; j < dian.length; j++) { dian[j].index = j; dian[j].onmouseenter = function () { clearInterval(timer); var count =this.index - maxZIndex>0?this.index-maxZIndex:dian.length+(this.index-maxZIndex); setOpa(count,"left");//虽然已经将各个层设置好，但是还需要经过500ms的过渡才算真正设置好 setDian() }; } //左右按钮事件 // for(var k=0;k<btnChild.length;k++){ // btnChild[k].onmouseenter = function () { // clearInterval(timer) // } // } console.log(btnChild[0]) btnChild[0].onclick=function () { setOpa(1,"left"); setDian(); }; btnChild[1].onclick = function () { setOpa(1,"right"); setDian(); } </script>
    </body>
    </html>

###### 3. 横向滚动 ######

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

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

> 思想：  
> ① 将五张不同的图片和与第一张相同的图片放到一个div中，通过改变该div的`margin-left`来实现横向滚动的效果。当div中的倒数第二张图片结束向左移动后（移动时间为动画时间），将该div的`margin-left`设为0，且取消移动动画，在等待计时器时延后，则是第一张（与最后一张叠加到一起）向左移动，然后第二张图片展示。  
> ② 在点击右边按钮时，图片向右移动，若当前展示的是第一张图片，则在点击右边按钮后，整个div移动至最右边，取消移动动画（即即将展示倒数第二张图片，因为第一张和最后一张图片相同）,由于整个div的移动需要时间，为了避免用户操作过快（还未移动到最右边便开始新的移动），故需要给移动设置时延。（当点击右边按钮的过程：取消移动动画，整个div移至最右边，div向右移动，展示倒数第二张图片）

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> .all { width: 600px; height: 300px; margin: auto; overflow: hidden; position: relative; } .imgLists { height: 300px; width: 4200px; } .hasTran { transition: margin-left .5s ease-in-out; } .imgEle { height: 300px; width: 600px; float: left; } .dianList { position: absolute; width: 100px; bottom: 10px; left: 0; right: 0; margin: auto; } .dian { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid white; box-shadow: 1px 1px 6px 1px white; } .btn { position: absolute; top: 130px; z-index: 11; width: 100%; } .btn > span { display: block; width: 30px; height: 30px; background: rgba(0, 0, 0, 0.69); color: #fff; text-align: center; line-height: 30px; } .btn > span:nth-child(1) { border-radius: 0 50% 50% 0; float: left; } .btn > span:nth-child(2) { border-radius: 50% 0 0 50%; float: right; } </style>
    </head>
    <body>
    <div class="all">
        <div class="imgLists">
            <img src="img/1.jpg" class="imgEle"/>
            <img src="img/2.jpg" class="imgEle"/>
            <img src="img/3.jpg" class="imgEle"/>
            <img src="img/4.jpg" class="imgEle"/>
            <img src="img/5.jpg" class="imgEle"/>
            <img src="img/6.jpg" class="imgEle"/>
            <img src="img/1.jpg" class="imgEle"/>
        </div>
        <div class="dianList">
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
        </div>
        <div class="btn">
            <span><</span>
            <span>></span>
        </div>
    </div>
    <script> var imgList = document.getElementsByClassName("imgEle"); var imgLists = document.getElementsByClassName("imgLists")[0]; var dianList = document.getElementsByClassName("dian"); var all = document.getElementsByClassName("all")[0]; var num = 0; var nowIndex = 0; var timer; dianList[nowIndex].style.backgroundColor = "white"; var btnList = document.getElementsByClassName("btn")[0].children; setTimer(); function changeMargin(direction) { //在-3600px 到0px时，不能有过渡。否则会有抖动 if (direction == "left") { num++; nowIndex = num; imgLists.style.marginLeft = -num * 600 + "px"; if (num == imgList.length - 1) { nowIndex = 0; setTimeout(function () { num = 0; imgLists.style.marginLeft = 0; imgLists.className = "imgLists" }, 500) } else { imgLists.className = "hasTran imgLists" } } else { num--; if (num < 0) { imgLists.style.marginLeft = -3600 + "px"; num=imgList.length-2; imgLists.className = "imgLists" } setTimeout(function () { //设置延迟是为了避免还未移动到尾部便开始设置新的marginLeft imgLists.className="imgLists hasTran"; imgLists.style.marginLeft=-600*num+"px"; },1); nowIndex=num; } } function setTimer() { timer = setInterval(function () { changeMargin("left"); setDian(); }, 1500); } function setDian() { for (var i = 0; i < dianList.length; i++) { if (i == nowIndex) { dianList[i].style.backgroundColor = "white"; } else { dianList[i].style.backgroundColor = "" } } } //鼠标进入和移出图片事件 all.onmouseenter = function () { clearInterval(timer) } all.onmouseleave = function () { setTimer(); } //不能给点设置鼠标移除移进清除计时器和添加计时器事件，否则会和all移入移除计时器叠加（ for (var j = 0; j < dianList.length; j++) { dianList[j].index = j; dianList[j].onmouseenter = function () { num = this.index-1; changeMargin("left"); nowIndex = this.index; setDian() }; } //设置左右按钮点击事件 btnList[0].onclick = function () { changeMargin("left"); setDian(); }; btnList[1].onclick = function () { changeMargin("right"); setDian(); } </script>
    </body>
    </html>

[20190819200943773.gif]: /images/20211023/f2558113403848fe8314f675be87e5ef.png
[20190819200432262.gif]: /images/20211023/df82f6422c6040ce932c23832265bab1.png
[20190819201104119.gif]: /images/20211023/34d1b520dfb54ab9a0d2a22342c5304b.png