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

最新推荐文章于 2024-07-10 18:00:00 发布

Lemon

最新推荐文章于 2024-07-10 18:00:00 发布

阅读量355

点赞数 1

分类专栏：学习

本文链接：https://blog.csdn.net/weixin_43314846/article/details/99734892

版权

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

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

1、三维轮播

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

效果图：

在这里插入图片描述

步骤：
①先做普通的轮播（默认是顺时针方向）：根据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