javascript

3.轮播图

3.1轮播图-交互

• 问题1 最后一张切换到第一张的时候 会倒着移动

  • 分析原因：最后一张图到第一张图 是left值-2400px 到 0px的过程 就有倒叙效果

  • 解决方法：在最后再添加第一张图片 给用户造成视觉差

• 问题2:最后一张图片的指示点对应不上

  • 分析原因： n = 4 oSpan[4]不存在

  • 解决方法：n=4是第一张图片 让oSpan[0]设置背景色

<script>
        // 1.自动切换   定时器
        var list = document.getElementsByClassName("list")[0];
        var oSpan = document.getElementsByTagName("span");
        var oBox = document.getElementsByClassName("box")[0];
        var timer = setInterval(auto, 1000);
        var n = 0;
        function auto() {
            // 显示第一张  left -800px*0
            // 显示第二张  left -800px*1
            // 显示第三张  left -800px*2
            // 显示第四张  left -800px*3
            // 显示第一张   left  -800px*4
            n++;
            if (n > 4) {
                list.style.left = "0px";
                n = 1;
            }
            move(list, "left", 100, -800 * n);
            /*
                问题1 最后一张切换到第一张的时候  会倒着移动
                解决方法：在最后再添加第一张图片 给用户造成视觉差
            */
            // 改变指示点颜色
            for (var i = 0; i < oSpan.length; i++) {
                oSpan[i].style.backgroundColor = "#fff";
            }
            /*
                问题2:最后一张图片的指示点对应不上
                分析原因：n = 4   oSpan[4]不存在  
                解决方法：n=4是第一张图片   让第一个指示显示
            */
            if (n == 4) {
                oSpan[0].style.backgroundColor = "red"
            } else {// n= 1 2 3 让对应span显示红色背景
                // 第一张图   oSpan[0]   第二章图 oSpan[1]
                oSpan[n].style.backgroundColor = "red";
            }
        }
        // 2.划入盒子  停止图片切换
        oBox.onmouseover = function () {
            clearInterval(timer);
        }
        // 3.滑出盒子   开启图片切换
        oBox.onmouseout = function () {
            timer = setInterval(auto, 1000)
        }
        // 4.点击左箭头   切换图片
        // 5.点击右箭头   切换图片
        // 6.点击指示点   切换图片
    </script>