标签：平移 index 轮播 js next var 小圆点 left

<div class="container">
    <ul class="list">
<!-- 切换逻辑
    我们当前的动画逻辑 是通过修改list元素的left值   平移实现的图片切换
    在图片1的前边没有图片5的情况下 是不可能实现  1出场 5入场的动画的
    在图片5的后边没有图片1的情况下 是不可能实现  5出场 1入场的动画的
    所以我们会在结构当中   图片1的前边增加一张图片5    图片5的后边增加一张图片1  用于实现动画效果
    后添加的图片我们称作 假5和假1    默认显示的5张图片 我们称作 真1-真5

    当我们在真1 点击 prev按钮  要先向假5进行动画的切换  当动画完成之后  因为假5和真5就是一张图片 所以瞬间修改left值 进行位置的切换
-->
        <li><img src="img/5.jpg" alt=""></li>
        <li><img src="img/1.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/4.jpg" alt=""></li>
        <li><img src="img/5.jpg" alt=""></li>
        <li><img src="img/1.jpg" alt=""></li>
    </ul>
    <a href="javascript:;" class="prev">&lt;</a>
    <a href="javascript:;" class="next">&gt;</a>
    <div class="pointsDiv">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<script type="text/javascript">

    //  获取显示区域容器    移入停止自动轮播    移出后 重启自动轮播
    var container = document.querySelector('.container');
//      获取图片容器    轮播图的本质 就是通过操作list容器的left值  实现图片切换
    var list = document.querySelector('.list');
//      获取左右按钮    点击左右按钮  轮播图 实现前后一页的切换
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');

    var points = document.querySelectorAll('.pointsDiv span');
//    定义动画总时长
    var time = 3000;
//    定义动画帧时长
    var itemTime = 30;
//    定义图片宽度变量
    var imgWidth = container.clientWidth;
//    定义显示图片张数   小圆点的个数 对应图片的张数 所以使用小圆点元素数组的长度
    var showNum = points.length;
//  定义小圆点索引  默认高亮的是第一个小圆点 所以该变量默认值为0
    var index = 0;
//  定义一个变量  记录当前动画是否在执行 以实现基本节流
    var isMovIng = false;

//  给左右按钮绑定点击事件
    prev.onclick = function () {
        nextPage(false);
    }
    next.onclick = function () {
        nextPage(true);
    }
//  给小圆点绑定点击事件
    for (var i = 0; i < points.length; i++) {
//小圆点绑定index属性
        points[i].index = i;
        points[i].onclick = function () {
            nextPage(this.index);
        }

    }

//  自动轮播 定时器调用nextPage这个翻页函数 然后传true 向后翻
    var autoTimer = setInterval(function () {
        nextPage(true)
        console.log(1);
    },3000)
//  移入停止自动轮播    移出之后重启自动轮播
    container.onmouseenter = function () {
        clearInterval(autoTimer)
    }
    container.onmouseleave = function () {
        autoTimer = setInterval(function () {
            nextPage(true)
        },3000)
    }




//  封装动画函数
//  next:
//    布尔值：
//        1.false  向右移动  list的left值 增加 600
//        2.true   向左移动 list的left值 减少600
//    数值（索引）： 计算前后索引差值*图片宽度  即为移动距离
    function nextPage(next) {
        if(isMovIng){
            return
        }

    //  只要翻页函数被调用  动画就开始执行了  所以将isMovIng的状态进行更新
    //  isMovIng这个变量 默认为false 因为页面默认静止    当任意一个行为触发了nextPage的调用时 我们会将该变量的状态修改true
    //  且在未来3秒（time）的时间内 都会保持为true的状态  直到符合停止的逻辑  清除定时器 我们会将该变量修改为false
        isMovIng = true;

    //  定义记录帧数的变量
        var num = 0;
    //  参数类型判断
        if(typeof next == 'boolean'){
            // 去计算总偏移  ±600(单张图片宽度)
            var offset = next ? - imgWidth : imgWidth;
        }else{
        //   next形参接收的值 是当前点击的索引
            var offset = -( next - index ) * imgWidth
        }

    //  计算单次偏移
        var itemOffset = offset / ( time / itemTime );
    //  获取当前list的位置   因为轮播图都是基于当前位置增加偏移 去计算新位置的
        var left = list.offsetLeft;
    //  计算终点left = 当前位置 + 总偏移
        var targetLeft = left + offset;
        var timer = setInterval(function () {
        //  循环定时器没执行一次  就说明走了一帧
            num++;
            left += itemOffset;
            if(num === time / itemTime){
                clearInterval(timer)
        //      只要是 当前帧数 = 总帧数  意味着这一次翻页 已经停止
                isMovIng = false;
        //   页面停止才有可能触及边界
                if(left === 0){
                //  此时用户在真1 又点击了 prev按钮  切换到了假5  当动画完成之后 需要切换到真5  实际排列的倒数第二张
                //  实际显示的图片的最后一张 永远都是倒数第二张 因为其后边一定会有一张假1占位
                //  倒数第二张图片的left值 = 显示图片张数 * 图片宽度
                    left = -showNum * imgWidth;
                }else if( left === -(showNum + 1) * imgWidth){
                //  说明用户在真5 点击了next按钮  切换到了假1  我们需要切换到真1   实际排列的正数第二张
                //  实际显示的图片的第一张 永远都是正数第二张 因为其前边一定会有一张假5占位
                    left = -imgWidth;
                }
            }
            list.style.left = left + 'px';

        },itemTime);
        upDate(next);
    }

//  小圆点更新函数封装
//  能够让小圆点切换的逻辑 一共三处   1.点击左右按钮  2.自动轮播   3.点击小圆点
// 只要图片产生切换  nextPage函数需要调用  小圆点更新就需要跟着调用
// 接收一个参数判断方向的布尔值
    function upDate(next) {

        if(typeof next == 'boolean'){
            var targetIndex = next ? index + 1 : index - 1;
        }else{
        //   next就是当前点击的那个小圆点的索引
            var targetIndex = next;
        }

    //  首尾相接：大于最大值等于最小值  小于最小值等于最大值
        if(targetIndex < 0){
        //  我们应该切换到索引最大值
            targetIndex = points.length - 1;
        }else if(targetIndex > points.length - 1){
            targetIndex = 0;
        }

    //  index         对应取消高亮的那个小圆点
    //  targetIndex  代表当次切换之后 要高亮的小圆点
        points[index].className = '';
        points[targetIndex].className = 'active';

    //  更新索引  因为类名切换完成之后  index需要更新成当前正在高亮的那一个小圆点的索引
        index = targetIndex;
    }
</script>

标签：平移,index,轮播,js,next,var,小圆点,left
来源： https://www.cnblogs.com/Thantics/p/16619072.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。