前段实现两个图片轮播

     window.onload = function () {
        // 1.获取标签
        var oPicDiv = document.getElementById("pic"),
            oList = document.getElementById("list"),
            oPicDiv1 = document.getElementById("pic1"),
            oList1 = document.getElementById("list1");
        // 添加两份的内容复制网页
        oList1.innerHTML = oList1.innerHTML + oList1.innerHTML;
        oList.innerHTML = oList.innerHTML + oList.innerHTML;
        // 2.默认左边滚动: left
        var iLeft = 0;// 位置
        var iPosition = -1;// 方向
        function fnAnimation() {
            iLeft += iPosition;
            //判断切换
            if (iLeft < -1000) {
                iLeft = 0;
            }
            if (iLeft > 0) {
                iLeft = -1000;
            }
            oList.style.left = iLeft + "px";
            oList1.style.left = iLeft + "px";
            console.log("定时器一直在走");
        }
      var timer =   setInterval(fnAnimation,35);
        // 4.监听鼠标
        oPicDiv.onmouseover = function () {
             //干掉计时器
             clearInterval(timer);
        }
        // 鼠标移开 动画开始
        oPicDiv.onmouseout = function () {
            // 重新开启
            timer =  setInterval(fnAnimation,35);

        }
        oPicDiv1.onmouseover = function () {
            // 干掉计时器
            clearInterval(timer);
        }
        // 鼠标移开 动画开始
        oPicDiv1.onmouseout = function () {
            // 重新开启
            timer = setInterval(fnAnimation, 35);
        }
        }

你可能感兴趣的:(js)