js原生轮播图

轮播图案例核心思想
1.当鼠标经过时，左右按钮显示，鼠标离开时，左右按钮隐藏
2.动态生成小圆点，第一个小圆点高亮
3.点击小圆点，图片跟随移动
①利用自定义属性 记录图片所在元素的序列号index
②当点击当前小圆点，图片移动index图片的offsetWidth.
③克隆第一张图片放在最右边，位置一定放在动态创建小圆点的后面
4.点击按钮 图片移动（右侧）左侧相反
①声明一个num变量记录点击的次数
②当点击一次按钮时，图片移动num图片的offsetWIdth
③当点击的次数等于图片的（数组）的索引时，图片所在父元素最左侧，让num重新等于0；
5.点击小圆圈，图片移动时，小圆圈也跟随移动并显示高亮
①声明播放小圆圈的跟随移动的变量
②当图片移动一次，小圆圈自增1
③当播放次数等于图片的长度时，次数回到0
④排他思想，播放当前次数时，给当前次数（current）设置设置为高亮
6.自动播放
①给点击按钮添加定时器，没两秒后让按钮自动点击。
②鼠标经过时 定时器关闭
③鼠标离开时，开启定时器
④为了连贯性，让前面声明的num circle与自动播放的次数一致，要把点击当前图片元素的序号赋值给num 和circle
7.为了防止用户连续点击过快，应该添加回调函数，当自动播放完成后才能地点击（节流阀）
①设置一个布尔类型变量，检测是否播放
②是否等于true 如果等于true 关闭为false
③利用回调函数 当动画函数执行完毕 打开 true

css代码
		
			 <style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
    
    .w {
        width: 1200px;
        margin: 0 auto;
    }
    
    .main {
        width: 980px;
        height: 455px;
        margin-left: 219px;
        margin-top: 10px;
    }
    
    .focus {
        position: relative;
        width: 721px;
        height: 455px;
        /* background-color: purple; */
        overflow: hidden;
    }
    
    .focus ul {
        position: absolute;
        top: 0;
        left: 0;
        width: 800%;
    }
    
    .focus ul li {
        float: left;
    }
    
    .arrow-l,
    .arrow-r {
        display: none;
        position: absolute;
        top: 50%;
        margin-top: -20px;
        width: 24px;
        height: 40px;
        background: rgba(0, 0, 0, .3);
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-family: 'icomoon';
        font-size: 18px;
        /* 提高左右箭头层级 */
        z-index: 2;
    }
    
    .arrow-r {
        right: 0;
    }
    
    .circle {
        position: absolute;
        bottom: 10px;
        left: 50px;
    }
    
    .circle li {
        float: left;
        width: 8px;
        height: 8px;
        /* background-color: #fff; */
        border: 2px solid rgba(255, 255, 255, 0.5);
        margin: 0 3px;
        border-radius: 50%;
        /*鼠标经过显示小手*/
        cursor: pointer;
    }
    
    .current {
        background-color: #fff;
    }
    
    li a img {
        width: 721px;
        height: 455px;
    }
</style>

html代码

		 <div class="w">
    <div class="main">
        <div class="focus fl">
            <!-- 左侧按钮 -->
            <a href="javascript:;" class="arrow-l">
                    &lt;
                 </a>
            <!-- 右侧按钮 -->
            <a href="javascript:;" class="arrow-r"> > </a>
            <!-- 核心的滚动区域 -->
            <ul>
                <li>
                    <a href="#"><img src="images/(1).jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/(2).jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/(3).jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/(4).jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/(5).jpg" alt=""></a>
                </li>

                <!-- 小圆圈 -->
                <ol class="circle">

                </ol>
        </div>

    </div>
</div>

js部分动画部分

function animate(obj, target, callback) {
// console.log(callback);  callback = function() {}  调用的时候 callback()

// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
    // 步长值写到定时器的里面
    // 把我们步长值改为整数 不要出现小数的问题
    // var step = Math.ceil((target - obj.offsetLeft) / 10);
    var step = (target - obj.offsetLeft) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    if (obj.offsetLeft == target) {
        // 停止动画 本质是停止定时器
        clearInterval(obj.timer);
        // 回调函数写到定时器结束里面
        // if (callback) {
        //     // 调用函数
        //     callback();
        // }
        callback && callback();
    }
    // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
    obj.style.left = obj.offsetLeft + step + 'px';

}, 15);

}

js轮播部分

			window.addEventListener('load', function() {
// 1. 获取元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
// 2. 鼠标经过focus 就显示隐藏左右按钮
focus.addEventListener('mouseenter', function() {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';
    // 鼠标悬浮,清除定时器
    clearInterval(timer);
});
focus.addEventListener('mouseleave', function() {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';
    // 鼠标离开, 重新开启定时器
    timer = setInterval(function() {
        // 手动调用arrow_r的点击事件
        arrow_r.click();
    }, 2000);
});
// 3. 动态生成小圆圈  有几张图片，我就生成几个小圆圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
// console.log(ul.children.length);
for (var i = 0; i < ul.children.length; i++) {
    // 创建一个小li 
    var li = document.createElement('li');
    // 记录当前小圆圈的索引号 通过自定义属性来做 
    li.setAttribute('index', i);
    // 把小li插入到ol 里面
    ol.appendChild(li);
    // 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
    li.addEventListener('click', function() {
        // 干掉所有人 把所有的小li 清除 current 类名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        // 留下我自己  当前的小li 设置current 类名
        this.className = 'current';
        // 5. 点击小圆圈，移动图片 当然移动的是 ul 
        // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
        // 当我们点击了某个小li 就拿到当前小li 的索引号
        var index = this.getAttribute('index');
        // 当我们点击了某个小li 就要把这个li 的索引号给 num  
        num = index;
        // 当我们点击了某个小li 就要把这个li 的索引号给 circle  
        circle = index;
        animate(ul, -index * focusWidth);
    })
}
// 把ol里面的第一个小li设置类名为 current
ol.children[0].className = 'current';
// 6-动态克隆第一张图片, 追加到ul的最后
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);

// 用来记录当前显示图片的索引: num代表的是要显示当前图片, ul需要向左偏移几张图片的宽度
var num = 0;
// 7-点击右侧按钮, ul向左切换一张图片
// 记录小圆圈的索引号
var circle = 0;
// 节流阀
var flag = true;
arrow_r.addEventListener('click', function() {
    if (flag) {
        flag = false;
        // 当到达最后一张图片的时候
        if (num == ul.children.length - 1) {
            // 立马将ul.style.left设置为0, 也就是显示第一张图片
            ul.style.left = 0;
            // 将图片索引重置为0
            num = 0;
        }
        num++
        animate(ul, -num * focusWidth, function() {
            flag = true;
        });
        // 8-小圆圈跟随高亮显示
        circle++;
        if (circle == ol.children.length) {
            circle = 0;
        }
        // 调用circleChange点亮小圆点
        circleChange();
    }

});
// 9. 左侧按钮做法
arrow_l.addEventListener('click', function() {
    if (flag) {
        flag = false;
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * focusWidth + 'px';

        }
        num--;
        animate(ul, -num * focusWidth, function() {
            flag = true;
        });
        // 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
        circle--;
        // 如果circle < 0  说明第一张图片，则小圆圈要改为第4个小圆圈（3）
        if (circle < 0) {
            circle = ol.children.length - 1;
        }
        // 调用circleChange点亮小圆点
        circleChange();
    }

});


function circleChange() {
    for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
    }
    ol.children[circle].className = 'current';
}

// 10-自动播放
var timer = setInterval(function() {
    // 手动调用arrow_r的点击事件
    arrow_r.click();
}, 2000);})