JS实现轮播图小案例

本文实例为大家分享了JS实现轮播图小案例的具体代码,供大家参考,具体内容如下

分析:

  • 点击左右箭头 滑动轮播图
  • 鼠标不在轮播图内时 每隔2秒自动滑动轮播图
  • 鼠标移入时 停止自动滑动轮播图
  • 点击小圆圈 显示对应的轮播图

1、鼠标移入、移出显示或隐藏左右箭头:

// 获取左右箭头的元素
    let arrow_l = this.document.querySelector('.arrow-l');
    let arrow_r = this.document.querySelector('.arrow-r');
    // 获取到轮播图盒子元素
    let focus = this.document.querySelector('.focus');

    // 轮播图盒子添加鼠标移入移出事件 显示或隐藏 左右箭头
    focus.addEventListener('mouseenter', function(e) {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        // 鼠标移入的时候清除定时函数,不再自动滑动轮播图
        clearInterval(timer);
        timer = null;

    });

    focus.addEventListener('mouseleave', function(e) {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        // 鼠标移出  添加定时任务,每2秒来触发一次点击右箭头的点击
        timer = setInterval(function() {
            arrow_r.click();
        }, 2000);
    })

2、添加ol内的li标签:

// 获取到ul列表(轮播图列表)和ol列表 (小圆圈列表)元素
var ul = focus.querySelector('ul');
// 此时ol列表内没有元素
var ol = focus.querySelector('.circle');
// 循环轮播图列表 有多少张轮播图就添加多少个小圆圈
for (var i = 0; i < ul.children.length; i++) {
        // 创建li标签
        var li = this.document.createElement('li');
        // 给li标签添加自定义属性 为轮播图的下标 用于
        li.setAttribute('l-index', i);
        // ol标签添加li标签
        ol.appendChild(li);
        // 每一个li标签添加点击函数
        li.addEventListener('click', function() {
            // 清除所有小圆圈的样式
            for (var j = 0; j < ol.children.length; j++) {
                ol.children[j].className = '';
            }
            // 点击哪一个小圆圈  就添加样式
            this.className = 'current';

   // 点击小圆圈  更改num和circl 来更换轮播图
            num = this.getAttribute('l-index');
            circl = this.getAttribute('l-index');
            // 动画效果
            animate(ul, -num * focusWidth);
        })

    }

3、复制第一张轮播图到ul的最后,显得轮播图更自然,添加记录轮播图的下标和记录小圆圈的下标,添加节流阀:
流阀

添加一个节流阀 默认为true 如果点击之后立即改为false 如果没处理完上次点击的事件 这个时间内的点击事件不再处理
类似一个锁,当锁住的时候只做一件事,别的点击不会再做,等什么时候开了锁,什么时候才可以做。

// 克隆一个第一张轮播图的节点添加到ul内
// 播放到最后一个的时候  转到第一个看着有连贯性
    ol.children[0].className = 'current';
    let cloneLi = ul.children[0].cloneNode(true);
    ul.appendChild(cloneLi);

    // 添加一个下标  来记录轮播图播放到了第几张
    num = 0;
    // 与num类似,记录小圆圈的下标
    circl = 0;
    // 添加节流阀
    flag = true;

4、右箭头、左箭头的点击事件和小圆圈更改样式:

// 点击右箭头的  点击事件
arrow_r.addEventListener('click', function(e) {
        // 添加一个节流阀 默认为True 如果点击之后立即改为false  如果没处理完上次点击的事件 这个时间内的点击事件不再处理
        if (flag) {
            // 改变节流阀的状态
            flag = false;

            // 如果num下标为最后一张 就恢复到第一张 把num下标改为默认0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;

            }
            // num下标加1
            num++;
            // 改变动画效果 滑动到  第几张轮播图 * 一张的宽度 的距离
            animate(ul, -num * focusWidth, function() {
                // 回调函数设置节流阀为true  可以再次点击
                flag = true;
            });

            // 小圆圈+1
            circl++;
            // 如果小圆圈到了最后一个  恢复为0
            if (circl == ul.children.length - 1) {
                circl = 0;
            }
            // 改变小圆圈的样式
            circlChange();
        }
    })
// 左箭头的点击事件
    arrow_l.addEventListener('click', function(e) {
        if (flag) {
            flag = false;
            // 判断为0时说明是从第一张开始往左点
            if (num == 0) {
                // 更改num下标为最后一个
                num = ul.children.length - 1;
                // 更改轮播图为最后一个
                ul.style.left = -num * focusWidth + 'px';
            }
            // num -1
            num--;
            // 动画效果
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });
            // 如果小圆圈为0  说明到了第一个轮播图
            if (circl == 0) {
                // 小圆圈到最后一个
                circl = ul.children.length - 1;
            }
            // 小圆圈-1
            circl--;
            // 改变小圆圈的样式
            circlChange();
        }
    })
function circlChange() {
     // 遍历ol列表  删除每一个小圆圈的样式
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        };
        // 给当前circl下标的小圆圈添加样式
        ol.children[circl].className = 'current';
    }

5、轮播图动画函数的封装:

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 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);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-11-16

原生js实现无限循环轮播图效果

知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px

JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了,样式和逻辑均写在js里. 3.html标签代码,js代码 <div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png">&

js实现点击左右按钮轮播图片效果实例

本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un

JS实现左右无缝轮播图代码

废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu

js实现支持手机滑动切换的轮播图片效果实例

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

JS轮播图实现简单代码

本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播

js实现从左向右滑动式轮播图效果

轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实现第一种效果的方法. 原理 相同大小的图片并成一列,但只显示其中一张图片,其余的隐藏,通过修改left值来改变显示的图片. 点击查看效果 html部分 nav为总容器,第一个ul列表#index为小圆点列表,鼠标覆盖哪个小圆点就显现第几张图片,on是一个给小圆点添加背景颜色属性的类:第二个ul列表#

原生js实现轮播图的示例代码

很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea

使用html+js+css 实现页面轮播图效果(实例讲解)

html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=

js实现轮播图的完整代码

今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->

js实现轮播图的两种方式(构造函数、面向对象)

本文实例为大家分享了js实现轮播图的具体代码,供大家参考,具体内容如下 1.构造函数 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type='text/css'> *{ margin:0; padding:0;} #wrap{ width:500px; height:360px; margin:1

使用Require.js封装原生js轮播图的实现代码

index.html页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>require.js封装轮播图</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } #banner{ width: 830px; he

原生js实现轮播图特效

轮播图也称为焦点图,是网页中比较常见的网页特效. 功能需求: ​ 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. ​ 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理. ​ 3.图片播放的同时,下面小圆圈模块跟随一起变化. ​ 4.点击小圆圈,可以播放相应图片. ​ 5.鼠标不经过轮播图,轮播图也会自动播放图片. ​ 6.鼠标经过,轮播图模块, 自动播放停止. 此文章的代码为一个完整的轮播图的实现代码,复制即可运行 实现效果由于大小问题无法上传,可自行观看淘宝或京东首页轮

JS原生轮播图的简单实现(推荐)

哈喽!我的朋友们,最近有一个新项目.所以一直没更新!有没有想我啊!! 今天咱们来说一下JS原生轮播图! 话不多说: 直接来代码吧:下面是CSS部分: *{ padding: 0px; margin: 0px; } img{ width: 500px; height: 300px; } li{ float: left; } ul{ width: 2000px; list-style: none; position: absolute; } div{ width: 500px; height: 30

利用BootStrap的Carousel.js实现轮播图动画效果

前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 一起来看代码吧: 页面比较丑,希望大家不要介意哦嘻嘻 效果图: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my love-首页</title> <link rel="styleshee

纯JS实现轮播图

这几天一直在看js动画,今天又get到了一个轮播图,使用纯js实现的,但是没有美化哈,需要的小伙伴自己美化喔 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

用vue写一个仿简书的轮播图的示例代码

1.先展示最终效果: 2.解决思路 Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.动画效果交给transition完成.可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示: 3.代码实现 各个slide的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $

JS实现轮播图效果

本文实例为大家分享了JS实现轮播图展示的具体代码,供大家参考,具体内容如下 原理介绍 1.html <div id="swiper-container" class="swiper-container" onmouseenter="swiperImg()" onmouseleave="stopSwiper()"> <div id="img-list" style="left:0p