js 大图轮播

Posted 2020-09-11 九零后大白

var timer;
var timer1;
var imgCount = 0;
var speed = 0;



document.getElementsByClassName(‘melelexxr‘)[0].onmouseover = function () {
    window.clearInterval(timer1);
}
document.getElementsByClassName(‘melelexxr‘)[0].onmouseout = function () {
    autoMove();
}

autoMove();
//自动移动
function autoMove() {
    timer1 = window.setInterval(function () {
        move1(1);
    }, 1800);
}

//移动方法
function move1(fx) {
    window.clearInterval(timer);//关掉定时器

    if (fx == 1)//判断向左还是向右
        imgCount++;
    else
        imgCount--;

    if (imgCount >= 3)//超出长度，变为第一张
        imgCount = 0;
    else if (imgCount < 0)
        imgCount = 2;

    var end = -1190 * imgCount;
    var oImgMove = document.getElementsByClassName(‘melelexxrd‘)[0];
    timer = window.setInterval(function () {
        if (oImgMove.offsetLeft == end) {
            window.clearInterval(timer);//关掉定时器
            return;
        }

        speed = Math.ceil(Math.abs((Math.abs(end) - Math.abs(oImgMove.offsetLeft))) / 10);

        document.getElementById(‘h1‘).innerText = speed;

        //图片移动
        if (oImgMove.offsetLeft > end)
            oImgMove.style.left = oImgMove.offsetLeft - speed + ‘px‘;
        else if (oImgMove.offsetLeft < end)
            oImgMove.style.left = oImgMove.offsetLeft + speed + ‘px‘;

    }, 20);


}