JavaScript之轮播图制作

最新推荐文章于 2024-06-17 15:29:34 发布
最新推荐文章于 2024-06-17 15:29:34 发布
阅读量2.1k 收藏 33
点赞数 2
分类专栏： JavaScript 案例 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44827643/article/details/125640985
版权

目录

1.轮播布局

2.JS动态效果

（1）根据图片个数得到图片列表区域的宽度

（2）根据图片个数创建相应的圆点并为每个圆点绑定自定义属性

 （3）通过事件委托给圆点切换区域绑定点击事件，根据圆点的自定义属性值进行相应的切换

 （4）通过定时器设置图片自动切换的效果

3.解决bug

本文主要介绍如何利用原生JS实现简单的轮播图效果，主要分成三大步骤。

1.轮播布局

轮播区域是由一个大模块包裹，设置固定宽高。内部分为图片列表区域和圆点切换区域。图片列表区域存放的是轮播图的图片，圆点切换区域用于后期动态切换图片，由图片个数动态生成。

2.JS动态效果

（1）根据图片个数得到图片列表区域的宽度

imgList.style.width = imgList.children.length * 620 + 'px';

（2）根据图片个数创建相应的圆点并为每个圆点绑定自定义属性

 for (var i = 0; i < imgList.children.length; i++) {
                var aNode = document.createElement('a');
                aNode.setAttribute('index', i);
                circle.appendChild(aNode);
            }

 （3）通过事件委托给圆点切换区域绑定点击事件，根据圆点的自定义属性值进行相应的切换

 circle.addEventListener('click', function(e) {
                if (e.target.nodeName != 'A') {
                    return false;
                }
                if (flag) {
                    flag = false;
                    var thisIndex = e.target.getAttribute('index');
                    tIndex = e.target.getAttribute('index') * 1 + 1;
                    slow(imgList, -thisIndex * 620, function() {
                        flag = true;
                    });
                    circlechange(thisIndex);
                }

            })

 （4）通过定时器设置图片自动切换的效果

 var tIndex = 1;

            function autoChange() {

                setInterval(function() {
                    if (flag) {
                        flag = false;
                        if (tIndex >= imgListli.length) {
                            tIndex = 0;
                        }
                        slow(imgList, -tIndex * 620, function() {
                            flag = true;
                        });
                        circlechange(tIndex);
                        tIndex++;
                    }
                }, 3000)

            }

3.解决bug

上述效果初步完成以后，可能会出现剧烈的抖动效果，原因在于缓动函数在短时间内被多次调用。

解决这个问题需要利用节流阀，核心原理是：当调用某个函数时，其他函数不会被调用，直到此函数调用结束才会调用其他函数。这里利用flag值的变化进行动态控制。

效果如图所示：

 

完整代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        
        .banner {
            width: 600px;
            margin: auto;
            border: 10px solid green;
            height: 350px;
            position: relative;
            overflow: hidden;
        }
        
        .imgList img {
            width: 600px;
            height: 350px;
        }
        
        .imgList {
            position: absolute;
        }
        
        .imgList li {
            float: left;
            margin-right: 20px;
            list-style: none;
        }
        
        .circle {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .circle a {
            width: 15px;
            height: 15px;
            background: green;
            border-radius: 50%;
            opacity: .8;
            float: left;
            margin-right: 10px;
            cursor: pointer;
        }
        
        .circle a.hover {
            background: black;
            opacity: .7;
        }
    </style>
</head>

<body>
    <div class="banner">

        <ul class="imgList">
            <li><img src="1.png" /></li>
            <li><img src="2.jpg" /></li>
            <li><img src="3.jpg" /></li>
            <li><img src="4.jpg" /></li>
        </ul>
        <div class="circle">
        </div>
    </div>




    <script type="text/javascript">
        var imgList = document.querySelector('.imgList');
        var circle = document.querySelector('.circle');
        var circleA = circle.children;
        var imgListli = imgList.children;
        var thisIndex = 0;
        var flag = true;

        window.onload = function() {

            imgList.style.width = imgList.children.length * 620 + 'px';

            autoChange();

            for (var i = 0; i < imgList.children.length; i++) {
                var aNode = document.createElement('a');
                aNode.setAttribute('index', i);
                circle.appendChild(aNode);
            }

            circle.addEventListener('click', function(e) {
                if (e.target.nodeName != 'A') {
                    return false;
                }

                if (flag) {
                    flag = false;
                    var thisIndex = e.target.getAttribute('index');
                    tIndex = e.target.getAttribute('index') * 1 + 1;
                    slow(imgList, -thisIndex * 620, function() {
                        flag = true;
                    });
                    circlechange(thisIndex);
                }

            })
            var tIndex = 1;

            function autoChange() {

                setInterval(function() {
                    if (flag) {
                        flag = false;
                        if (tIndex >= imgListli.length) {
                            tIndex = 0;
                        }
                        slow(imgList, -tIndex * 620, function() {
                            flag = true;
                        });
                        circlechange(tIndex);
                        tIndex++;
                    }
                }, 3000)

            }

            function circlechange(t) {
                for (var i = 0; i < circleA.length; i++) {
                    circleA[i].className = '';
                }
                circleA[t].className = 'hover';
            }

            function slow(obj, target, getflag) {
                obj.myInter = setInterval(function() {
                    var offsetLeft = obj.offsetLeft;
                    var num = (target - offsetLeft) / 10;
                    num > 0 ? num = Math.ceil(num) : num = Math.floor(num);
                    if (offsetLeft == target) {
                        clearInterval(obj.myInter);
                        getflag && getflag();
                    } else {
                        obj.style.left = offsetLeft + num + 'px';
                    }
                }, 10)
            }

        }
    </script>

</body>

</html>

cloudOnSkyline
关注
  • 2
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JavaScript轮播图简单制作方法
10-20
JavaScript轮播图是一种常见的网页动态效果，用于展示多个图片或内容块，并在用户无操作时自动切换显示。这里我们将详细探讨如何使用JavaScript实现一个简单的轮播图。 首先，轮播图的基本结构通常包括一个容器...
javascript轮播图超详细
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
JS实现轮播图的三种简单方法。
m0_67392409的博客
03-11 1万+
Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下： 实现效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> &
原生js实现轮播图的两种方式
最新发布
h395910638的博客
06-17 438
element-ui组件库中，有一个Carousel走马灯组件，也就是我们平时说的轮播图，为了搞清它的实现原理，接下来我们使用原生js实现一个轮播图效果
JS轮播图的n种方法
Benxiaohai_311的博客
03-22 1万+
第一种 轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一种轮播图，没有耳朵，自动轮播，鼠标放上去会停止，只需在body里面更改图片宽高和图片路径</title> <style> *.
JavaScript表单校验
mqingo的博客
11-11 956
确认事件             事件触发函数             函数操作元素                          校验用户名                 1. 当用户鼠标移动到输入框中时候, 请给用户一个提示                     事件: 焦点事件 onfocus                     触发函数                     ...
JavaScript轮播图
Junnix的博客
01-09 537
JavaScript轮播图 <!-- 定义初始页面图片 --> <img id="and" src="img/1.jpg" width="100%" height="30%"> <script> var i=1; function fun(){ i++ while(i>3){ i=1 }
JavaScript制作轮播图效果.zip
05-20
总的来说，创建一个JavaScript轮播图涉及到HTML布局、CSS样式设计以及JavaScript事件监听和动画处理。通过理解这些文件的作用并结合实际代码，我们可以学习到如何利用前端技术构建动态交互的网页元素，提升用户体验...
Swiper制作图片轮播切换特效
07-24
此外，我们还可以调整slideChangeTransitionStart和slideChangeTransitionEnd事件，以便在图片切换开始和结束时执行特定的操作，如更新进度条的状态。 最后，关于"jiaoben8358"这个文件名，可能包含的是示例代码或...
JavaScript＋vue 快速制作轮播图插件
03-25
能快速制作轮播图样式
JavaScript实现轮播图特效
10-15
在本文中，我们将探讨如何使用JavaScript实现一个基本的轮播图特效。轮播图是一种常见的网页元素，用于展示多张图片或内容，并通过自动播放和用户交互来循环显示。以下是实现这个功能的关键知识点： 1. **HTML 结构...
js实现网页轮播图：超详细步骤【新手指北】
m0_60843756的博客
09-10 2156
1. JS函数 2. JS事件 3. JavaScript 对象 4. JavaScript prototype（原型对象） 5. call和apply及bind三者的区别（面试重点） 6. Javascript的事件流模型（面试重点） 7. 防抖与节流（面试精选） 8. JS中的虚拟DOM是什么？（面试重点） 9. 手写一个new，实现同等功能 10. 获得页面url参数的值（常用） ...
js实现轮播图
qq_65528486的博客
08-09 1593
具有以下功能：1.自动图片轮播 2.鼠标移入当前页面暂停，移出继续播放 3.底下小按钮切换图片。
使用JS来实现轮播图的效果
weixin_64965154的博客
05-25 7540
第一步我们先获取三个元素，toggle()是一个方法调用，我是把左边和右边的写在一个方法，显示更加美观，，然后呢我们执行右侧按钮业务，还是先获取右侧按钮，然后定义一个信息量i=0。3，最后讲一个功能，这里我们依旧是在定时器上面声明一个变量，因为我们定时器也是有一直在懂，所以我们来这块设定一个点击事件。但是当我们轮播图到了最后一个，需要往返第一个，这时候我们需要判断，如果到了素组下标为8的时候，我们就得返回第一个。第一个是鼠标经过停止事件，第二个是开始事件，这样呢我们一个完整的轮播图就做出来了。
JS实现轮播图(超详细代码注释)
m0_56836274的博客
08-24 2万+
html，css,javasript实现轮播图,超详细代码注释。实现的功能有：自动轮播，鼠标放上去停止轮播，鼠标离开自动轮播，点击下方小圆圈实现图片切换，点击左右按钮实现切换
JS实现轮播图（一看就懂逻辑清晰）
热门推荐
分享、进步、收获！！！
02-15 4万+
逻辑清晰的轮播图
使用js来实现轮播图
CQXXTXX的博客
12-31 300
使用js制作轮播图
【JS基础】JavaScript轮播图代码详解
qq_44580366的博客
07-06 5000
小米轮播图 js 轮播图效果 JavaScript基础项目
JavaScript之手把手教你做轮播图
跳探戈的小龙虾的博客
04-08 1万+
我教你做的轮播图包括但不限于以下功能： 平滑滚动、定时滚动 + 点击滚动、防鼠标连续点击、第一张图与最后一张图无缝处理 如果你是在找轮播图怎么做的小白，那么恭喜你，找到我这儿，不用再换了，认认真真看完这篇文章，我保证你能做一个完整的轮播图。 而且我会以面向小白的简单通俗讲解，带大家做完轮播图，保证全程没有盲点。 不过前提是，有简单的jQuery基础和会用setTimeout()和setInterval()函数，这两个要求可以在我的其他博客里学习到。
JavaScript制作轮播图
06-03
要制作JavaScript轮播图，可以按照以下步骤进行： 1. 创建一个HTML页面，并在页面中添加一个包含轮播图的容器元素。 2. 在CSS中设置容器元素的宽度和高度，并将轮播图中的图片按水平方向排列。 3. 在JavaScript中获取容器元素和轮播图中的所有图片元素。 4. 创建一个计时器，用于每隔一段时间自动切换轮播图中的图片。 5. 在计时器中，使用CSS中的transition属性和transform属性，对当前显示的图片进行向左移动的动画效果，并将下一张图片设置为显示状态。 6. 创建左右箭头按钮，用于手动切换轮播图中的图片。 7. 在左右箭头按钮的点击事件中，使用CSS中的transition属性和transform属性，对当前显示的图片进行向左或向右移动的动画效果，并将下一张或上一张图片设置为显示状态。 以上是制作JavaScript轮播图的基本步骤，具体实现还需根据具体需求进行调整和完善。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值