zoukankan      html  css  js  c++  java
  • 大图轮播 2017-4-15

    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);
    
    
    }
  • 相关阅读:
    选择屏幕加功能码
    alv 列标题
    指针引用的学习
    CM3中数据传输对齐/非对齐方式
    perl学习笔记之:模式匹配,模块,文档
    PERL学习之模式匹配
    perl:split函数用法
    perl:_DATA_ _LINE_ _FILE_
    CVS update常用技巧
    cvs 文件无法上传debug
  • 原文地址:https://www.cnblogs.com/zhengqian/p/6714763.html
Copyright © 2011-2022 走看看