轮播图的实现及步骤讲解

r囧r小猫 2024-04-17 17:36 42阅读 0赞

轮播图设计的原理及思路  
首先在写好css之后 我们要对接下来的js进行一个分步操作  
第一步，我们可以先写好一个自动播放的逻辑：  
这部分我们用的方法就是 采用图片作为背景图片，在js里边通过索引来实现图片的切换  
第二步，我们要实现一些简单的细节，当我们的鼠标放上去的时候，我们希望这个时候箭头显示，并且当前的自动播放停止，当鼠标移走的时候，箭头也就随之隐藏，这部分很容易实现，我们只需要在鼠标放在上边的时候，通过清除定时器clearInterval（）  
鼠标移走的时候，我们可以重新启用定时器，这时我们为了方便操作，我们把自动播放写成一个函数，方便我们在重新需要使用的时候调用方便。  
第三步，相对来说，也是稍微有一点难度，需要为每一个小圆点绑定一个鼠标放上去的处理程序，我们通过for循环遍历小圆点，当鼠标放到小圆点的时候清除当前的样式，之后在被鼠标放上的小圆点添加active样式  
此时较为重要的东西来了，小圆点移动之后，我们需要让图片也要跟着移动，怎么才能实现这样的效果呢？大多数人对于这个点都会  
有点模糊，进而觉得有难度，其实不然，只要我们仔细思考一下问题就会迎刃而解  
我们在html文件中加入data-id，将每一个小圆点设置一个索引号，为了方便我们后续引用调取他的值  
parseInt(this.getAttribute(‘data-id’)); 通过这种方法 获取到小圆点此时的索引，并将它赋值给当前的  
current，然后我们让背景显示为获取到的这个索引的对应图片，xxx.style.backgroundImage = “url(’”+ urls\[current\] +"’)";  
这样我们就轻松实现了 小圆点的跳转对应图片的跳转  
第四步 就是一些细节的完善，我们需要在点击按钮的时候，图片会随着滚动，就是两个简单的点击事件，一个是左边的按钮，一个是右边的按钮  
点击事件就需要注意两个问题 向左播放点击的时候，我们要判断当下一张  
图片是第一张的时候 ，接下来在点击的时候，我们就要让next=图片的长度减1  
接下来就是根据索引的变化，清除当前的样式，设置next的样式，改变背景图片  
当前样式更新  
右边的按钮点击事件是一样的，不同的是判断最后一张图片的时候，下一张要将next=0

以下是代码部分，如有错误请批评指正，我们共同进步·

--------------------

<style>
            #lunbo {
                width: 800px;
                height: 600px;
                position: relative;
                margin: 0 auto;
            }
    
            #image div {
                width: 800px;
                height: 600px;
                background-image: url("./picture/bing09.jpg");
                background-position: center;
            }
    
            #circle {
                position: absolute;
                bottom: 20px;
                left: 50%;
                height: 20px;
                cursor: pointer;
            }
    
            #circle div {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: gray;
                display: inline-block;
                margin: 0 5px;
            }
    
            #btn #left,#btn #right {
                font-size: 50px;
                line-height: 30px;
                text-align: center;
                opacity: 0.7;
                width: 30px;
                height: 30px;
                position: absolute;
                top: 50%;
                color: aliceblue;
            }
    
            #left {
                left: 20px;
            }
    
            #right {
                right: 20px;
            }
    
            #circle .active {
                background-color: yellow;
            }
        </style>
    </head>
    
    <body>
        <div id="lunbo">
            <div id="image">
                <div id="xxx"></div>
            </div>
            <div id="circle">
                <div data-id="0" class="circlebtn"></div>
                <div data-id="1" class="circlebtn"></div>
                <div data-id="2" class="circlebtn active"></div>
                <div data-id="3" class="circlebtn"></div>
                <div data-id="4" class="circlebtn"></div>
            </div>
            <div id="btn">
                <div id="left"><</div>
                <div id="right">></div>
            </div>
        </div>
    
        <script>
            var urls = [
                './picture/bing09.jpg',
                './picture/bing14.jpg',
                './picture/zhaohanyingzi19.jpg',
                './picture/3.jpg',
                './picture/4.jpg',
            ];
            var current = 2;
            var xxx = document.getElementById('xxx');
            //获取每一个轮播点
            var circle = document.getElementById('circle');
            var circlebtn = document.getElementsByClassName('circlebtn');
            var lunbo = document.getElementById('lunbo');
            var left = document.getElementById('left');
            var right = document.getElementById('right');
            var LB, next;
    
            //js里边设置圆点那个块居中显示
            circle.style.marginLeft = '-' + circle.clientWidth/2 + 'px';
            console.dir(circle);
            circle.offsetWide
            //当鼠标放到图片上的时候，显示箭头，停止自动播放
            lunbo.onmouseover = function () {
                left.style.display = 'block';
                right.style.display = 'block';
                clearInterval(LB);
            }
            //鼠标移走的时候
            lunbo.onmouseout = function () {
                left.style.display = 'none';
                right.style.display = 'none';
                //继续轮播
                LBS();
            }
            //鼠标放上小圆点的时候，
            for (var i = 0; i < circlebtn.length; i++) {
                //
                circlebtn[i].onmouseover = function () {
                    circlebtn[current].classList.remove('active');
                    //被鼠标放上去的小圆点添加active样式
                    this.classList.add('active');
                    //将鼠标现在的索引赋值给图片的索引
                    current = parseInt(this.getAttribute('data-id'));
                    //图片的显示即改为小圆点索引对应图片的索引
                    xxx.style.backgroundImage = "url('" + urls[current] + "')";
    
                }
            }
            //接下来完善，点击按钮的时候 实现图片播放
    
    function play(direction) {
        if(direction == 'left') {
            next = current - 1;
            if(next < 0){
                next = urls.length - 1;
            }
        }else {
            next = current + 1;
            if(next >= urls.length) {
                next = 0;
            }
        }
        circlebtn[current].classList.remove('active');
                circlebtn[next].classList.add('active');
                xxx.style.backgroundImage = "url('" + urls[next] + "')";
                current = next;
    } 
            left.onclick = function () {
                play('left');
            };
            right.onclick = function () {
               play('right');
            };
    
            //自动播放
            function LBS() {
                LB = setInterval(function () {
                    next = current + 1;
                    if (next >= urls.length) {
                        //当下一个超过图片的长度的时候
                        next = 0;
                    }
                    xxx.style.backgroundImage = "url('" + urls[next] + "')";
                    circlebtn[current].classList.remove('active');
                    circlebtn[next].classList.add('active');
                    current = next;
                }, 3000);
            }
    
        </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，42人围观）

还没有评论，来说两句吧...

相关阅读

相关轮播图的实现及步骤讲解

播图设计的原理及思路首先在写好css之后我们要对接下来的js进行一个分步操作第一步，我们可以先写好一个自动播放的逻辑：这部分我们用的方法就是采用图片...

r囧r小猫/ 2024年04月17日 17:36/ 0 赞/ 43 阅读

相关轮播图的多种实现及原理

【写在前面】最近，在自己的项目中遇到了很多轮播图。当然，这里的很多，并非数量多，指的是种类很多，即多种实现。然后我觉得有不少小技巧，就决定写一篇文章讲解一下。

￡神魔★判官ぃ/ 2022年12月31日 06:22/ 0 赞/ 173 阅读

相关 html vue轮播图,webpack+Vue实现轮播图

前言本来如果只是想做个轮播图的话不太需要这么麻烦的构建webpack项目，但是我的目的不是只做个轮播图这么简单，主要是想用webpack搭建一个vue项目，然后在里面实现了

迈不过友情╰/ 2022年10月19日 01:39/ 0 赞/ 319 阅读

相关轮播图实现html,html、css、js实现轮播图

2017-03-13 今天把轮播图的知识1过了一下，写了一个比较简单的轮播图，给大家参考一下。查看具体的效果点击这个链接： http://gjhnstxu.me/%E8

落日映苍穹つ/ 2022年10月10日 09:46/ 0 赞/ 391 阅读

相关图片轮播html实现原理,简单轮播图的实现及原理讲解（js）

0.最终效果预览 ![366e374e108d][] 鼠标未触及区域时(自动滚动中) ![366e374e108d][] 鼠标触及区域后 (停止滚动，显示按钮) 基本

叁歲伎倆/ 2022年10月05日 10:57/ 0 赞/ 365 阅读

相关轮播图的实现

轮播图的实现, 已封装轮播轮播图在网页搭建中经常遇到, 与轮播有关的卡片滑块也常见, 所以有必要理解其中的原理轮播图HTML中应包含几个部分?

深碍√TFBOYSˉ_/ 2022年05月22日 22:54/ 0 赞/ 299 阅读

相关轮播图的实现原理

一、实现轮播图最主要的就是定时器（setInterval 函数和 clearInterval 函数），他们分别是定时和清除定时。二、html代码如下：

心已赠人/ 2022年05月18日 01:41/ 0 赞/ 306 阅读

相关轮播图的实现

简单轮播图实现（H5+CS3+JS&JQuery）最终效果图如下：每2000毫秒自动轮播，鼠标划入显示左右按钮；进行手动点击按钮左右切换。划出隐藏按钮并继续进行

阳光穿透心脏的1/2处/ 2022年04月02日 13:52/ 0 赞/ 295 阅读

相关 js实现轮播图（简单滚动轮播)

原理：在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，

冷不防/ 2021年11月10日 09:30/ 0 赞/ 757 阅读

相关轮播图的实现

轮播图的实现 <view> <swiper class='swipers' indicatorDots='true' interval=

清疚/ 2021年09月17日 00:20/ 0 赞/ 622 阅读