PC端网页特效 | 常见网页特效案例

目录

案例：网页轮播图

轮播图JS全部代码

节流阀

案例：返回顶部

 JS代码为

案例：筋头云案例

---

案例：网页轮播图

轮播图也称为焦点图，是网页中比较常见的网页特效。

功能需求：

• 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
• 点击右侧按钮一次，图片往左播放一张，以此类推， 左侧按钮同理。
• 图片播放的同时，下面小圆圈模块跟随一起变化。
• 点击小圆圈，可以播放相应图片。
• 鼠标不经过轮播图， 轮播图也会自动播放图片。
• 鼠标经过，轮播图模块， 自动播放停止。

首先要有两个左右的按钮，然后轮播图里面的图片是在ul.li.a里面的

为了让轮播图里的图片在一行显示，给里面的li加上浮动，但是位置又不够了，给ul设置足够的宽度600%，这样就一行装得下了。最后记得给父盒子加上overflow：hidden；

因为js较多，我们单独新建js文件夹，再新建js文件， 引入页面中。 此时需要添加 load 事件。

 

鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。

    // 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
    })
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
    })

动态生成小圆圈

• 核心思路：小圆圈的个数要跟图片张数一致
• 所以首先先得到ul里面图片的张数（图片放入li里面，所以就是li的个数）
• 利用循环动态生成小圆圈（这个小圆圈要放入ol里面）
• 创建节点 createElement(‘li’)
• 插入节点 ol. appendChild(li)
• 第一个小圆圈需要添加 current 类

    // 动态生成小圆圈,有几张图片就生成几个小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    console.log(ul.children.length);  // 5 个图片
    for (var i = 0; i < ul.children.length; i++) {
        // 创建一个小li
        var li = document.createElement('li');
        // 把小li插入到ol里面
        ol.appendChild(li);
    }
    // 把ol里面的第一个小li设置类名为current
    ol.children[0].className = 'current';

小圆圈的排他思想

• 点击当前小圆圈，就添加current类
• 其余的小圆圈就移除这个current类
• 注意： 我们在刚才生成小圆圈的同时，就可以直接绑定这个点击事件了。所以写到动态生成小圆圈for循环的里面

        // 点击当前小圆圈，就添加current类,(排他思想) 我们可以生成小圆圈的同时直接绑定点击事件
        li.addEventListener('click', function () {
            // 干掉所有人,把所有的小li 清除current类名
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            // 留下我自己,当前的小li设置current类名
            this.className = 'current';
        })

点击小圆圈滚动图片

• 此时用到animate动画函数，将js文件引入（注意，因为index.js 依赖 animate.js 所以，animate.js 要写到 index.js 上面）
• 使用动画函数的前提，该元素必须有定位
• 注意是ul 移动 而不是小li  ，foucs有overflow：hidden