(共566篇)
全部分类
js图片加载状态 es5函数继承-构造函数的继承(2) es5函数继承-非构造函数的继承 jsError:UnexpectedtokeniinJSON js经常变脸的this js计算随机字符串 es5构造函数基础 js柯里化编程 js生成36位随机字符串 js跨域ajax请求获取传递的cookie js获取元素相对于屏幕的位置 js格式化获取到的日期对象xxxx-xx-xxxx:xx js函数式编程 js把url上的参数序列化为对象 js实时预览选择的图片文件 js中的深拷贝与浅拷贝 js函数的prototype属性 js获取浏览器滚动条高度scrollTop js类数组转数组 js改变select元素的值 js千分位加逗号的方法 es5函数继承-构造函数的继承(3) js表单提交的那些事儿 jscookie的作用域 js获取元素计算后的样式 js中的innerHTML方法 js获取DOM元素的方法 jsES5与ES6中的for循环 js向textarea输入tab字符 jsdisplay:none的input元素会默认添加到表单中提交吗 js解读-Function.prototype.apply.call() 认识javascript 在页面中插入JS代码 JS语句和代码块 JS的注释 让浏览器显示不同的弹窗 在页面中输出一些信息 浏览器中的开发者工具 JS中的变量 JS中的原始数据类型 JS中的引用数据类型 原始和引用数据类型的区别 JS中的算数运算符 JS中的赋值运算符 JS中的比较运算符 JS中的逻辑运算符 JS中的三元运算符 运算符的优先级 JS中数据类型的转换 JS流程控制语句之if-else 数据类型的隐式转换 JS流程控制语句之switch JS流程控制语句之for循环 在浏览器中调试JS代码 JS流程控制语句之for循环案例 JS流程控制语句之while循环 JS流程控制语句之do-while循环 JS中函数的声明与使用 JS中函数的参数 JS中函数的arguments JS中函数的返回值 JS中的纯函数 JS中的作用域 JS语句的执行顺序 JS语句的执行顺序2 神奇的this 神奇的this(补充) 改变函数的this 构造函数 函数的继承 函数的prototype属性 对象的创建和使用 处理代码错误和Error对象 数组的声明和使用 数组的length属性 新增或删除数组中的元素 合并多个数组内容 for循环遍历数组 map方法遍历数组 forEach方法遍历数组 every和some遍历数组 includes方法查找元素 indexOf和lastIndexOf方法查找元素 find和findIndex方法查找元素 filter方法筛选元素 sort方法对数组排序 reverse方法翻转数组元素顺序 reduce和reduceRight统计元素 slice提取数组元素 数组方法总结 字符串的声明和使用 字符串的长度length 在字符串中提取字符 在字符串中查找字符 转换字符串大小写 去除字符串前后的空格 拼接和分割字符串 替换字符串 Number对象及其运用 Math对象及其运用 Date对象及其运用 全局函数 编码和解码字符串 把字符串转为数字 判断目标是否是数字 正则表达式 任意一个字符的集合 表示数量的符号 元数据符号 正则中的或 表示边界的符号 记住匹配项和非捕获匹配 正向和反向查找 正向肯定和否定查找 贪婪和非贪婪模式 webAPI中的BOM和DOM window对象 打开或关闭新窗口 设置当前窗口的名称 获取当前窗口的打开状态 获取浏览器的位置和尺寸 操作窗口滚动条 设置和取消定时器 navigator对象 location对象 History对象 Document对象 DOM节点 创建修改或删除节点 检查节点 获取元素节点 获取元素节点两种方式的区别 往元素中插入内容 修改元素内容 获取元素节点的尺寸和位置信息 获取或修改元素标签上的属性 获取和修改元素class属性 关于元素标签属性的一些方法 获取元素的CSS样式 设置元素的CSS样式 js操作元素样式实现css过渡的案例 操作class实现css过渡的案例 连续操作元素样式的案例 星星案例 事件 给对象添加监听事件和侦听函数 单个元素添加多个监听事件 单个事件添加多个侦听函数 事件流 设置一次性的侦听函数 案例-插入多个li元素 移除侦听函数 案例-取消侦听函数 案例-改变图片元素路径 案例-切换多张图片显示状态 事件对象 获取触发事件的对象和监听对象 委托事件 判断事件是否会向上冒泡 鼠标进入和离开元素事件 阻止事件向上冒泡 阻止后添加的侦听函数执行 阻止事件的默认行为 案例-图片轮播 案例-图片自动轮播 案例-图片导航 案例-点击导航后取消自动轮播 模拟触发事件 快速模拟触发事件 判断事件是否被人为触发 自定义事件 点击事件的特有属性 元素滚动事件 判断元素的滚动方向 表单提交事件和重置事件 焦点事件 输入框内容改变事件 下拉框选项改变事件 单选框状态改变事件 多选框状态改变事件 表单控件值发生改变事件 判断页面滚动方向 带滚动效果的轮播图 带滚动效果的轮播图2 带滚动效果的轮播图3 判断元素是否在可视区域内 数字递增效果 JS的逻辑运算符&&和||中发生了什么 JS语法整理补充

带滚动效果的轮播图3
[ JS基础 ] 

带滚动效果的轮播图 3

  1. 最终效果
  2. 思路
  3. 代码实现

最终效果

思路

代码实现

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<style>
    .wrapper {
        height: 300px;
        width: 30%;
        margin: 0 auto;
        background-color: rgb(165, 177, 177);
        /* overflow: hidden; */
    }
    .inner {
        width: 225%;
        height: 80%;
        position: relative;
        left: -100%;
        top: 10%;
    }
    .img {
        width: 11.111%;
        height: 100%;
        float: left;
        text-align: center;
        font-size: 100px;
        color: white;
    }
    .img1 {
        background-color: rgb(80, 213, 218);
    }
    .img2 {
        background-color: rgb(124, 230, 98);
    }
    .img3 {
        background-color: rgb(241, 94, 173);
    }
    .img4 {
        background-color: rgb(248, 190, 97);
    }
</style>

<div class="wrapper">
    <div class="inner">
        <div class="img img1">1</div>
        <div class="img img2">2</div>
        <div class="img img3">3</div>
        <div class="img img4">4</div>
        <div class="img img1">1</div>
        <div class="img img2">2</div>
        <div class="img img3">3</div>
        <div class="img img4">4</div>
        <div class="img img1">1</div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<script>
    window.onload = function() {
        var innerEle = document.querySelector(".inner");
        var currentOrder = 1;
        function prevEvent() {
            var left;
            if (currentOrder == 1) {
                left = "-75%";
            } else {
                left = (currentOrder - 2) * -25 + "%";
            }
            if (currentOrder == 2) {
                innerEle.addEventListener(
                    "transitionend",
                    function() {
                        innerEle.style.transition = "none";
                        innerEle.style.left = "-100%";
                    },
                    { once: true }
                );
            }
            innerEle.style.transition = "all 0.3s linear";
            innerEle.style.left = left;
            if (currentOrder == 1) {
                currentOrder = 4;
            } else {
                currentOrder--;
            }
        }
        function nextEvent() {
            var left;
            if (currentOrder == 1) {
                left = "-125%";
            } else {
                left = currentOrder * -25 + "%";
            }
            if (currentOrder == 1) {
                innerEle.addEventListener(
                    "transitionend",
                    function() {
                        innerEle.style.transition = "none";
                        innerEle.style.left = "-25%";
                    },
                    { once: true }
                );
            }
            innerEle.style.transition = "all 0.3s linear";
            innerEle.style.left = left;
            if (currentOrder == 4) {
                currentOrder = 1;
            } else {
                currentOrder++;
            }
        }

        var timer = setInterval(function() {
            // prevEvent();
            nextEvent();
        }, 1000);
    };
</script>