码迷,mamicode.com
首页 > 其他好文 > 详细

大图轮播 2017-4-15

时间:2017-04-15 18:19:17      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:lex   code   etl   ret   style   get   判断   out   clear   

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);


}

 

大图轮播 2017-4-15

标签:lex   code   etl   ret   style   get   判断   out   clear   

原文地址:http://www.cnblogs.com/zhengqian/p/6714763.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!