轮播图

轮播图之根据小圆点移动图片

<script>
    //用户：当鼠标移入1,2,3按钮，图片改变

    //1. 获取元素
    // 获取box
    var box = my$('box');
    // 获取相框
    var inner = box.children[0];
    // 获取相框的宽度
    var imgWidth = inner.offsetWidth;
    // 获取ul
    var ulObj = inner.getElementsByTagName('ul')[0];
    // 获取所有的span
    var spanObjs = inner.getElementsByClassName('square')[0].getElementsByTagName('span');

    //2. 遍历所有的span标签，为每一个span标签添加鼠标移入事件
    for (var i = 0; i < spanObjs.length; i++) {
        //2.2 为每一个span添加自定义属性，span的索引
        spanObjs[i].setAttribute('index', i);
        //2.1 为span注册鼠标移入事件
        spanObjs[i].onmouseover = function () {
            //2.3 获取索引
            var hh = this.getAttribute('index');
            //2.4 移动ul
            animate(ulObj, -hh * imgWidth);

            //2.5 完成span按钮的排他效果
            // 排他两件事: 所有样式还原，当前设置样式--添加class=‘current’
            for (var j = 0; j < spanObjs.length; j++) {
                spanObjs[j].removeAttribute('class');
            }

            this.className = 'current';

        }
    }

    //为任意的元素，移动到任意的位置
    function animate(element, target) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            //1. 获取div的当前位置
            var current = element.offsetLeft;
            // 2. 设置一步走多少像素
            var step = 9;
            //2.2 判断step为正直还是负值
            step = current > target ? -step : step;
            //3. 走完了一步，当前位置改变
            current += step;
            //5. 达到目标，清除定时器
            if (Math.abs(target - current) < Math.abs(step)) {
                clearInterval(element.timeId);
                //4. 设置当前位置
                element.style.left = target + 'px';
            } else {
                //4. 设置当前位置
                element.style.left = current + 'px';
            }
        }, 20);
    }
</script>

 无缝轮播图

<script>
    //1. 获取元素
    // 获取相框
    var screen = my$('screen');
    // 获取相框的宽度
    var imgWidth = screen.offsetWidth;
    // 获取ul
    var ulObj = screen.getElementsByTagName('ul')[0];
    // 获取所有的li
    var list = ulObj.getElementsByTagName('li');

    //2.1 获取ul的位置
    var current = ulObj.offsetLeft;

    //2. 定时器，移动ul
    ulObj.timeId = setInterval(f1, 100);

    function f1() {
        //2.2 每隔20毫秒移动10像素
        current -= 10;

        //2.4 如果是最后一个li，那么就不再向左移动，而是瞬间定位到第一个li，完成无缝的效果
        if (current < -imgWidth * (list.length - 1)) {
            current = 0;
        }

        //2.3 给ul 重新设置位置
        ulObj.style.left = current + 'px';
    }

    //3. 当鼠标移入相框，清除定时器
    screen.onmouseover = function () {
        clearInterval(ulObj.timeId);
    }
    //4. 当鼠标移出相框，重新开启定时器
    screen.onmouseout = function () {
        ulObj.timeId = setInterval(f1, 100);
    }


</script>

左右焦点轮播图

<script>

    //1. 获取元素
    // 获取box
    var box = my$('box');
    // 获取相框
    var ad = box.getElementsByClassName('ad')[0];
    // 获取相框的宽度
    var imgWidth = ad.offsetWidth;
    // 获取左右焦点按钮的盒子
    var focusD = my$('focusD');
    // 获取ul
    var ulObj = my$('imgs');
    // 获取所有的li
    var list = ulObj.children;

    // 2. 当鼠标 移入 box  显示包着左右焦点的盒子
    box.onmouseover = function () {
        focusD.style.display = 'block';
    }
    box.onmouseout = function () {
        focusD.style.display = 'none';
    }

    //定义全局变量，用于存储移动的索引
    var index = 0;
    //点击右边按钮，移动ul
    my$('right').onclick = function () {
        // console.log(index);
        //当显示最后一个li时，不在移动ul 最后一个li的索引：list.length-1
        if (index < list.length - 1) {
            index++;
            animate(ulObj, -index * imgWidth);
        }
        // console.log(index + '======');
    }

    //点击左边按钮，移动ul
    my$('left').onclick = function () {
        //当显示第一张图片时，不在移动ul
        if (index > 0) {
            index--;
            animate(ulObj, -index * imgWidth);
        }
    }


    /**
     * 为任意的元素，移动到任意的位置
     * @param element 要移动的元素
     * @param target 元素的目标位置 是数字类型，不带px单位
     */
    function animate(element, target) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            //1. 获取div的当前位置
            var current = element.offsetLeft;
            // 2. 设置一步走多少像素
            var step = 9;
            //2.2 判断step为正直还是负值
            step = current > target ? -step : step;
            //3. 走完了一步，当前位置改变
            current += step;
            //5. 达到目标，清除定时器
            if (Math.abs(target - current) < Math.abs(step)) {
                clearInterval(element.timeId);
                //4. 设置当前位置
                element.style.left = target + 'px';
            } else {
                //4. 设置当前位置
                element.style.left = current + 'px';
            }
        }, 20);
    }

</script>