焦点图轮播图原理与机制

技能点：
DOM操作、定时器、事件运用、JS动画、函数递归、无限滚动大法

焦点图排序（无限滚动大法）：
image5
image1
image2
image3
image4
image5
image1

原理：
1. 假设共有5张图，5张图左浮动排列，
2. 并且都被一个list容器包裹，这个list是很长的，然后list被一个div包裹，
3. div的长度只有一张图的大小那么大，并且设置div的属性为 overflow:hidden
4. div设置为relative，list设置为absolute
5. 改变list的left值，实现焦点图的切换

样式布局HTML、CSS：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>

<div id="container">
    <div id="list" style="left: -600px;">
        <img src="img/5.jpg" alt=""/>
        <img src="img/1.jpg" alt=""/>
        <img src="img/2.jpg" alt=""/>
        <img src="img/3.jpg" alt=""/>
        <img src="img/4.jpg" alt=""/>
        <img src="img/5.jpg" alt=""/>
        <img src="img/1.jpg" alt=""/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:void(0)" id="prev" class="arrow">&lt;</a>
    <a href="javascript:void(0)" id="next" class="arrow">&gt;</a>
</div>

<script src="script.js"></script>

</body>
</html>

 

JS：

window.onload = function () {
    var container = document.getElementById('container');
    var list = document.getElementById('list');
    var buttons = document.getElementById('buttons').getElementsByTagName('span');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var index = 1;
    var autoTimer = null;

    /**
     * 左右切换函数
     * @param offset 左右的偏移量
     */
    var offsetL = 0;
    function animate(offset) {
        var oldLeft = parseInt(list.style.left);
        var newLeft = oldLeft + offset;
        offsetL = oldLeft;
        var interval = null;
        var intervalNum = 10;

        //console.log('offsetL: ' + offsetL);
        //console.log('newLeft: ' + newLeft);

        // 向左切换动画
        if((offset > 0) && (offsetL < newLeft)) {
            //console.log('左');
            interval = setInterval(function () {
                offsetL += offset/(300/intervalNum); // 300为移动的总时间

                //console.log(offsetL);

                list.style.left = offsetL + 'px';

                if(offsetL == newLeft) {
                    clearInterval(interval);

                    // 两个if语句实现了无限滚动
                    if(newLeft > -600) {
                        list.style.left = -3000 + 'px';
                    }

                    if(newLeft < -3000) {
                        list.style.left = -600 + 'px';
                    }
                }
            }, intervalNum);
        }

        // 向右切换动画
        if((offset < 0) && (offsetL > newLeft)) {
            //console.log('右');
            interval = setInterval(function () {
                offsetL -= -offset/(300/intervalNum); // 300为移动的总时间

                //console.log(offsetL);

                list.style.left = offsetL + 'px';

                if(offsetL == newLeft) {
                    clearInterval(interval);
                    // 两个if语句实现了无限滚动
                    if(newLeft > -600) {
                        list.style.left = -3000 + 'px';
                    }

                    if(newLeft < -3000) {
                        list.style.left = -600 + 'px';
                    }
                }
            }, intervalNum);
        }
    }

    /**
     * 小圆点切换函数
     */
    function buttonsCtrl() {
        for(var i = 0;i < buttons.length;i++) {
            if(buttons[i].className == 'on') {
                buttons[i].className = '';
            }
        }
        buttons[index - 1].className = 'on';
    }

    /**
     * 自动切换功能
     */
    function autoPlay() {
        autoTimer = setInterval(function () {
            next.onclick();
        }, 3000);
    }

    /**
     * 停止自动切换功能
     */
    function autoStop() {
        clearInterval(autoTimer);
    }

    // 自动切换
    autoPlay();
    container.onmouseover = autoStop;
    container.onmouseout = autoPlay;

    // 左右切换的功能
    next.onclick = function () {
        if(index == 5) {
            index = 1;
        }else {
            index++;
        }
        buttonsCtrl();

        animate(-600);
    };

    prev.onclick = function () {
        if(index == 1) {
            index = 5;
        }else {
            index--;
        }
        buttonsCtrl();

        animate(600);
    };

    /**
     * 点击小圆点切换焦点图
     */
    for(var i = 0;i < buttons.length;i++) {
        buttons[i].onclick = function () {
            if(this.className == 'on') {
                return; // 后面的语句不会再执行了，一直到buttonCtrl()都不会再执行
            }
            var myIndex = this.getAttribute('index');
            var offset = -600 * (myIndex - index);
            animate(offset);

            // index 更新到最新
            index = myIndex;

            // 小圆点变成橙色
            buttonsCtrl();
        };
    }
};

 

posted on 2016-06-18 15:16  Asina  阅读(913)  评论(0)  编辑  收藏  举报