zoukankan      html  css  js  c++  java
  • js 大图轮播

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

      

  • 相关阅读:
    Linux下查看tomcat版本
    React跳转路由传参3种方法和区别
    pc端布局方案
    vue针对搜索引擎做SEO优化
    vue-cli3配置vue.config.js持续更新
    MySQL连接语法(多表查询)
    MySQL约束和外键约束
    MySQL数据库查询
    MySQL数据库入门
    jQuery用法和bootstrap框架
  • 原文地址:https://www.cnblogs.com/jiulinghoudabai/p/6719146.html
Copyright © 2011-2022 走看看