美文网首页
JS轮播图

JS轮播图

作者: 所爱隔山海_不可平 | 来源:发表于2020-04-04 14:36 被阅读0次

1.结构层

结构层

2.样式层

样式1 样式2 样式三

.focus {

    position: relative;

    width: 721px;

    height: 455px;

    /* background-color: purple; */

    overflow: hidden;

    margin: 0 auto;

}

.focus ul {

    position: absolute;

    top: 0;

    left: 0;

    width: 600%;

}

.focus ul li {

    float: left;

}

.arrow-l,

.arrow-r {

    display: none;

    position: absolute;

    top: 50%;

    margin-top: -20px;

    width: 24px;

    height: 40px;

    background: rgba(0, 0, 0, .3);

    text-align: center;

    line-height: 40px;

    color: #fff;

    font-size: 18px;

    z-index: 2;

}

.arrow-r {

    right: 0;

}

.circle {

    position: absolute;

    bottom: 10px;

    left: 50px;

}

.circle li {

    float: left;

    width: 8px;

    height: 8px;

    border: 2px solid rgba(255, 255, 255, 0.5);

    margin: 0 3px;

    border-radius: 50%;

    /*鼠标经过显示小手*/

    cursor: pointer;

}

.current {

    background-color: #fff;

}


3.逻辑层

先封装一个动画函数,滚动的时候会用到

  //动画函数

function animate(obj, target, callback) {

            // 先清除以前的定时器,只保留当前的一个定时器执行

            clearInterval(obj.timer);

            obj.timer = setInterval(function() {

                    // 步长值写到定时器的里面

                    // 把我们步长值改为整数 不要出现小数的问题

                    // var step = Math.ceil((target - obj.offsetLeft) / 10);

                    var step = (target - obj.offsetLeft) / 10;

                    step = step > 0 ? Math.ceil(step) : Math.floor(step);

                    if (obj.offsetLeft == target) {

                        // 停止动画 本质是停止定时器

                        clearInterval(obj.timer);

                        // 回调函数写到定时器结束里面

                        // if (callback) {

                        // 调用函数

                        //     callback();

                   // }

                    callback && callback();

            }

            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式:(目标值 - 现在的位置) / 10

            obj.style.left = obj.offsetLeft + step + 'px';

        }, 15);

}


实现鼠标经过盒子 显示和隐藏 左右按钮

鼠标经过盒子 显示和隐藏 左右按钮

   // 1. 获取元素

        var arrow_l = document.querySelector('.arrow-l');

        var arrow_r = document.querySelector('.arrow-r');

        var focus = document.querySelector('.focus');

        // 获取父元素的宽度

        var focusWidth = focus.offsetWidth;

        // 2. 鼠标经过focus 就显示隐藏左右按钮

        focus.addEventListener('mouseenter', function() {

            arrow_l.style.display = 'block';

            arrow_r.style.display = 'block';

            clearInterval(timer);

            timer = null; // 清除定时器变量

        });

        focus.addEventListener('mouseleave', function() {

            arrow_l.style.display = 'none';

            arrow_r.style.display = 'none';

            timer = setInterval(function() {

                //手动调用点击事件

                arrow_r.click();

            }, 2000);

        });


动态生成小圆圈  有几张图片,我就生成几个小圆圈

动态生成小圆圈并且绑定点击事件 同上

   // 3. 动态生成小圆圈  有几张图片,我就生成几个小圆圈

        var ul = focus.querySelector('ul');

        var ol = focus.querySelector('.circle');

        for (var i = 0; i < ul.children.length; i++) {

            // 创建一个小li 

            var li = document.createElement('li');

            // 记录当前小圆圈的索引号 通过自定义属性来做 

            li.setAttribute('index', i);

            // 把小li插入到ol 里面

            ol.appendChild(li);

            // 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件

            li.addEventListener('click', function() {

                // 干掉所有人 把所有的小li 清除 current 类名

                for (var i = 0; i < ol.children.length; i++) {

                    ol.children[i].className = '';

                }

                // 留下我自己  当前的小li 设置current 类名

                this.className = 'current';

                // 5. 点击小圆圈,移动图片 当然移动的是 ul 

                // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值

                // 当我们点击了某个小li 就拿到当前小li 的索引号

                var index = this.getAttribute('index');

                // 当我们点击了某个小li 就要把这个li 的索引号给 num  

                num = index;

                // 当我们点击了某个小li 就要把这个li 的索引号给 circle  

                circle = index;

                // num = circle = index;

                // console.log(focusWidth);

                // console.log(index);

                animate(ul, -index * focusWidth);

            })

        }

        // 把ol里面的第一个小li设置类名为 current

        ol.children[0].className = 'current';

        // 6. 克隆第一张图片(li)放到ul 最后面

        var first = ul.children[0].cloneNode(true);

        ul.appendChild(first);


点击左右按钮切换

先封装一个添加类的函数 点击右按钮切换 同上 左边按钮点击

 circleChange函数封装

   function circleChange() {

            // 先清除其余小圆圈的current类名

            for (var i = 0; i < ol.children.length; i++) {

                ol.children[i].className = '';

            }

            // 留下当前的小圆圈的current类名

            ol.children[circle].className = 'current';

        }


右按钮

   // 7. 点击右侧按钮, 图片滚动一张

        var num = 0;

        // circle 控制小圆圈的播放

        var circle = 0;

        // flag 节流阀

        var flag = true;

        arrow_r.addEventListener('click', function() {

            if (flag) {

                flag = false; // 关闭节流阀

                // 如果走到了最后复制的一张图片,此时 我们的ul 要快速复原 left 改为 0

                if (num == ul.children.length - 1) {

                    ul.style.left = 0;

                    num = 0;

                }

                num++;

                animate(ul, -num * focusWidth, function() {

                    flag = true; // 打开节流阀

                });

                // 8. 点击右侧按钮,小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放

                circle++;

                // 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原

                if (circle == ol.children.length) {

                    circle = 0;

                }

                // 调用函数

                circleChange();

            }

        });


左按钮

   // 9. 左侧按钮做法

        arrow_l.addEventListener('click', function() {

            if (flag) {

                flag = false;

                if (num == 0) {

                    num = ul.children.length - 1;

                    ul.style.left = -num * focusWidth + 'px';

                }

                num--;

                animate(ul, -num * focusWidth, function() {

                    flag = true;

                });

                // 点击左侧按钮,小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放

                circle--;

                // 如果circle < 0  说明第一张图片,则小圆圈要改为第4个小圆圈(3)

                // if (circle < 0) {

                //     circle = ol.children.length - 1;

                // }

                circle = circle < 0 ? ol.children.length - 1 : circle;

                // 调用函数

                circleChange();

            }

        });


自动播放

自动播放

   // 10. 自动播放轮播图

        var timer = setInterval(function() {

            //手动调用点击事件

            arrow_r.click();

        }, 2000);

相关文章

  • 三种样式的轮播图

    一、100%比例轮播图 HTML代码 CSS样式 js代码 二、手动箭头轮播图 三、简易轮播图

  • 第五周学习内容

    焦点图轮播特效之原理、焦点图轮播样式之布局、焦点图轮播之箭头切换、焦点图轮播之无限滚动。 js简介、用法、输出。

  • 轮播图

    轮播图01 html css js

  • 项目-轮播图

    整个轮播图分为三部分:轮播指标、轮播项目及轮播导航。用boostrap实现轮播图要比用js、jQuery方便的多,...

  • 使用vue-awesome-swiper方法

    在main.js中引入轮播图插件 在基础组件中建立轮播图组件:

  • 原生JS轮播图

    :轮播图 1:页面 2:CSS 3:Js

  • JavaScript | 365笔记第87天 | 原生JS做轮播

    用原生JS做一个轮播图

  • 2021-11-25

    js 一页显示多张图无缝轮播

  • 原生js制作轮播图

    原生js 制作的轮播图 今天学习了一个原生js轮播图的方法。效果图如下 通过点击上下页和中间的点进行翻页,通过改变...

  • 常用插件

    js 插件 1,myFocus 焦点图插件===专注焦点图的js 库(轮播图)轻量级 http://demo.jb...

网友评论

      本文标题:JS轮播图

      本文链接:https://www.haomeiwen.com/subject/mhhjphtx.html