js新手实现轮播图简单易懂

r囧r小猫 2023-02-17 03:21 30阅读 0赞

新手学习完，自己做的小轮播，自动切换及小圆点变换没问题了。  
但是还存有几个小bug，还烦请大佬评论解答一下；  
box为显示的视图，设置溢出隐藏,  
big为大的图片容器，通过控制left值，实现切换图片的效果

1、当图片移动到第四张时，为了实现无缝效果，后面跟了第一张图片，这样定时器就会导致，在第一张图片停留两倍的时间。  
2、刷新页面，如果还没切换，此时点击第一个小圆点，left值会变为1210px,但此时输出n明明还是0。  
3、如果加左右切换的箭头，该怎样找到当前的n？如果直接设置left移动300px,是直接切换的，不是缓缓拖拉的效果。  
不胜感激

html部分

<div class="box">
            <ul class="big">
                <li>
                    <img src="./img/1.jpg" alt="">
                </li>
                <li>
                    <img src="./img/2.jpg" alt="">
                </li>
                <li>
                    <img src="./img/3.jpg" alt="">
                </li>
                <li>
                    <img src="./img/4.jpg" alt="">
                </li>
                <li>
                    <img src="./img/1.jpg" alt="">
                </li>
            </ul>
            <div class="circle">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
           
        </div>

css部分

<style> * { 
                margin: 0;
                padding: 0;
                list-style: none;
            }
    
            .box { 
                width: 300px;
                height: 300px;
                overflow: hidden;
                margin: 50px auto;
                position: relative;
                box-sizing: border-box;
                border: 5px solid pink;
                z-index: 10;
            }
    
            .big { 
                width: 1500px;
                height: 300px;
                position: relative;
                left: 0;
            }
    
            .big li { 
                float: left;
            }
    
            .big li img { 
    
                width: 300px;
                height: 300px;
            }
    
            .circle { 
                width: 100px;
                height: 20px;
                display: flex;
                position: absolute;
                justify-content: space-around;
                bottom: 0;
                right: 50%;
            }
    
            .circle span { 
                display: block;
                width: 20px;
                height: 20px;
                background: red;
                border-radius: 50%;
    
            }
    
            .active { 
                background: pink !important;
            }
          
        </style>

js部分

<script>
            var oul = document.getElementsByClassName('big')[0];
            var circle = document.getElementsByClassName('circle')[0];
            var spans = circle.getElementsByTagName('span');
            var box = document.getElementsByClassName('box')[0];
            var n = 0;
            var timer = null;
            function autoPlay() { 
                timer = setInterval(function () { 
                    n++;
                    if (n >= 5) { 
                        n = 0;
                    };
                    //小圆点背景色切换
                    for (var i = 0; i < spans.length; i++) { 
                        spans[i].className = '';
                        spans[n == 4 ? 0 : n].className = 'active';
                    }
                    //调用下方的移动函数
                    move(oul, 'left', 10, -300 * n);
                }, 2000)
            }
            autoPlay();
            //让oul位置动起来 elem:元素 attr:属性 speed：速度 target:目标值
            function move(elem, attr, speed, target) { 
                //根据初始值和目标值的大小，决定速度的正负
                speed = parseInt(getComputedStyle(elem)[attr]) > target ? -speed : speed;
                var timer1 = setInterval(function () { 
                    //获取oul初始left值
                    var oulLeft = parseInt(getComputedStyle(elem)[attr]);
                    //移动的距离 =初始值+速度
                    var speedend = oulLeft + speed;
                    //移动到目标距离后，清除定时器
                    if (speedend < target) { 
                        speedend = target;
                        clearInterval(timer1)
                    }
                    elem.style[attr] = speedend + 'px';
                }, 20)
            }
            //移入显示框，停止计时器，避免和点击事件冲突
            box.onmouseenter = function () { 
                clearInterval(timer);
               
            }
            //小圆点点击事件
            for (var i = 0; i < spans.length; i++) { 
                //自定义属性，获得相应小圆点的下标
                spans[i].index = i;
                spans[i].onclick = function () { 
                 
                    for (var i = 0; i < spans.length; i++) { 
                        spans[i].className = '';
                        spans[this.index].className = 'active';
                    }
                    move(oul, 'left', 10, -300 * this.index);
                }
            }
            //移出时，开启定时器
            box.onmouseleave = function () { 
                autoPlay();
            }
    
        </script>

发表评论取消回复

表情：

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

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

相关阅读

相关 JS实现简单的轮播图

S实现简单的轮播图 js用面向过程的方法实现简单的轮播图先写好简单的html布局；正常轮播图所要实现的功能有一下几个： 1.banner图的自动切换；...

逃离我推掉我的手/ 2024年04月18日 08:27/ 0 赞/ 112 阅读

相关简单css+js实现轮播图

轮播图由于js+css+html简单实现; 效果为16个cube 点击下一轮![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd...

你的名字/ 2024年04月18日 07:08/ 0 赞/ 118 阅读

相关 JS实现简单的轮播图

1. 用display属性的block或none控制轮播图代码如下： <!DOCTYPE HTML> <head> <met

ゝ一纸荒年。/ 2023年07月06日 06:24/ 0 赞/ 149 阅读

相关 js轮播图，简单易懂

首先完成HTML和CSS部分， 1. 划分区域 2. 让图片排成一排，可以利用浮动，也可以利用定位，在这里我用的是定位 3. 开始js部分：由于自己还在学习中，对Jav

蔚落/ 2023年06月30日 08:53/ 0 赞/ 60 阅读

相关 js新手实现轮播图简单易懂

新手学习完，自己做的小轮播，自动切换及小圆点变换没问题了。但是还存有几个小bug，还烦请大佬评论解答一下； box为显示的视图，设置溢出隐藏, big为大的图片容

r囧r小猫/ 2023年02月17日 03:21/ 0 赞/ 31 阅读

相关 html + js 简单实现轮播图

实现思路如下：设置所有图片的 display 属性为 none 设置一个 index 用来标志获取到的图片设置一个定时器，每隔一段时间令 index 自增并将对应

旧城等待，/ 2022年12月19日 13:16/ 0 赞/ 249 阅读

相关 html原生js实现图片轮播,原生js实现简单轮播图

本文实例为大家分享了js实现简单轮播图的具体代码，供大家参考，具体内容如下一、写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器，取代body，这样

冷不防/ 2022年10月06日 07:52/ 0 赞/ 330 阅读

相关 js实现简单的轮播图

html+css代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="

刺骨的言语ヽ痛彻心扉/ 2022年04月17日 03:54/ 0 赞/ 317 阅读

相关 js原生实现简易轮播图效果，原理简单易懂

原生js实现简易的轮播图用最基础的方式实现想不到的效果，能完成一个轮播图，能让你的兴趣大增。对于初学者来说，学完JavaScript基础知识，就要运用综合知识，实现一些

谁借莪１个温暖的怀抱￠/ 2022年02月05日 13:37/ 0 赞/ 233 阅读

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

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

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