原生Js实现自动无缝轮播图

最新推荐文章于 2024-04-08 16:26:29 发布
最新推荐文章于 2024-04-08 16:26:29 发布
阅读量1.5k 收藏 16
点赞数 6
文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cty13697011482/article/details/106786135
版权

javascript实现自动无缝轮播图

1、实现原理

轮播图实现原理是用一个大盒子组容器，里面包含一个小盒子，小盒子用来移动，小盒子里装着要轮播的图片，图片水平排放，当小盒子移动的时候带动图片一起移动，要想实现无缝轮播，则要在最后放一张与第一张一摸一样的图片，当图片滚动到最后一张时，用户会感觉这是第一张，然后再跳到第一张，这样用户就不会感觉图片是跳过去的，实现无缝轮播

2、实现效果

在这里插入图片描述
（图片上传有大小限制，这里就展示一部分。。。）

3、代码展示

3.1 网页结构布局（html代码）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/case.css">
</head>
<body>
    <div id="view">
        <div id="banner">
            <ul id="ul">
                <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
            </ul>
            <!-- 小圆点 用于显示图片个数 -->
            <ol id="bar"> 
			<!-- 因为要动态获取图片个数进行展示，所以这里不能写死 -->
            </ol>
            <!-- 左右焦点 -->
            <div id="fouse" style="display: none;">
                <span id="left">
                    &lt;
                </span>
                <span id="right">
                    &gt;
                </span>
            </div>
        </div>
    </div>
3.2 样式（css代码）
* {
    margin: 0;
    padding: 0;
}
#view {
    width: 400px;
    height: 600px;
    margin: 100px auto;
    border: 1px solid #000
}
#banner {
    width: 400px;
    height: 600px;
    position: relative;
    overflow: hidden;
}
#banner img {
    width: 400px;
    height: 600px;
    vertical-align: top;
}
#ul {
    width: 1000%;
    position: absolute;
    left: 0;
    top: 0;
    list-style: none;
}
#banner li {
    float: left;
}
#fouse {
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0;
    top: 50%;

}
#fouse span {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 50px;
    line-height: 50px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    opacity: 0.5;
    
}
#fouse #left {
    float: left;
}
#fouse #right {
    float: right;
}
ol {
    position: absolute;
    height: 20px;
    right: 20px;
    bottom: 20px;
    text-align: center;
    padding: 5px;
}
ol li {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background: #fff;
    margin: 5px;
    cursor: pointer;
}
ol .current {
    background-color: pink;
}
3.3 核心JS代码

首先获取元素方便之后操作

var view = document.getElementById("view");
        var banner = document.getElementById("banner");
        var fouse = document.getElementById("fouse");
        var ulObj = banner.children[0];
        var list = ulObj.children;
        var olObj = banner.children[1];
        var imgWidth = banner.offsetWidth;
        var pic = 0;
        var left = document.getElementById("left");
        var right = document.getElementById("right");

因为是动态创建小圆点，所以用for循环遍历图片列表，创建小圆点

for(var i = 0; i < list.length; i++) {
            var liObj = document.createElement("li");
            olObj.appendChild(liObj);
            liObj.innerText = (i + 1);
            //给小圆点动态添加一个index属性
            liObj.setAttribute("index", i)
}

把鼠标移到某一个小圆点上，可以跳转到指定的图片，所以给小圆点按钮注册一个onmouseover事件

liObj.onmouseover = function() {
                //清空所有样式
                for(var j = 0; j < olObj.children.length; j++) {
                    olObj.children[j].removeAttribute("class");
                }
                this.className = "current";
                pic = this.getAttribute("index");
    			//animate是后面自己封装的方法，用于移动图片
                animate(ulObj,-pic*imgWidth);
            }
        }

默认给第一个按钮添加样式

olObj.children[0].className = "current";

要想实现无缝轮播，克隆第一张图片

ulObj.appendChild(ulObj.children[0].cloneNode(true))

开启定时器

var timeId = setInterval(onMouseClickHandle,1000)
function onMouseClickHandle () {
            //如果是pic的值为5，此时显示第六张图片（内容为第一张），用户会认为看到的是第一张图片，所以当用户点击下一张的时候应该显示第二张图片
            if(pic == list.length - 1) {
                //如何实现从第六张变到第一张
                pic = 0;
                ulObj.style.left = 0 + 'px'//让ul的位置回到默认位置
            }
            pic++//pic++此时pic=1
            animate(ulObj, -pic * imgWidth)
            
            if(pic == list.length - 1) {
                //清除所有小圆点的样式，设置第一个小圆点为高亮状态
                olObj.children[olObj.children.length - 1].className = '';
                olObj.children[0].className = "current"
            }
            else {
                for(var i = 0; i < olObj.children.length; i++) {
                    olObj.children[i].removeAttribute("class");
                }
                olObj.children[pic].className = "current"
            }
        }

封装用于移动任意元素到指定位置的函数

 function animate(elem, target) {
            clearInterval(elem.timeId);
            elem.timeId  = setInterval(function() {
                //获取当前元素位置，为数字类型
                var current = elem.offsetLeft;
                //设置一次移动的距离
                var step = 10;
                //三目运算符，当不等式成立时，结果为冒号前面的值，反之为冒号后面的值
                step = current < target ? step : -step;
                current += step;
                if(Math.abs(current - target) > Math.abs(step)) {
                    elem.style.left = current + "px"
                }else {
                    //清除定时器
                    clearInterval(elem.timeId);
                    //到达指定位置
                    elem.style.left = target + "px"
                }
            },10)
        }

给用户设置交互事件

view.onmouseover = function() {
            //鼠标悬停，显示切换按钮和清除定时器
            fouse.style.display = "block"
            clearInterval(timeId)
        } 
        view.onmouseout = function() {
            //鼠标移开，隐藏切换按钮和开启定时器
            timeId = setInterval(onMouseClickHandle,1000)
            fouse.style.display = "none"
        }

        //点击切换下一张
        right.onclick = onMouseClickHandle;
        //点击切换上一张
        left.onclick = function() {
            //如果当前是第一张图片
            if(pic == 0) {
                pic = list.length - 1;
                ulObj.style.left = -pic * imgWidth + "px";
                
            }
            pic --;
            animate(ulObj, - pic * imgWidth);
            for(var i = 0;i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            olObj.children[pic].className = "current"
        }
3.4 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #view {
            width: 400px;
            height: 600px;
            margin: 100px auto;
            border: 1px solid #000
        }
        #banner {
            width: 400px;
            height: 600px;
            position: relative;
            overflow: hidden;
        }
        #banner img {
            width: 400px;
            height: 600px;
            vertical-align: top;
        }
        #ul {
            width: 1000%;
            position: absolute;
            left: 0;
            top: 0;
            list-style: none;
        }
        #banner li {
            float: left;
        }
        #fouse {
            width: 100%;
            height: 50px;
            position: absolute;
            left: 0;
            top: 50%;

        }
        #fouse span {
            width: 50px;
            height: 50px;
            text-align: center;
            font-size: 50px;
            line-height: 50px;
            color: #fff;
            cursor: pointer;
            font-weight: bold;
            opacity: 0.5;
            
        }
        #fouse #left {
            float: left;
        }
        #fouse #right {
            float: right;
        }
        ol {
            position: absolute;
            height: 20px;
            right: 20px;
            bottom: 20px;
            text-align: center;
            padding: 5px;
        }
        ol li {
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            background: #fff;
            margin: 5px;
            cursor: pointer;
        }
        ol .current {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="view">
        <div id="banner">
            <ul id="ul">
                <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
            </ul>
            <!-- 小圆点 -->
            <ol id="bar"> 

            </ol>
            <!-- 左右焦点 -->
            <div id="fouse" style="display: none;">
                <span id="left">
                    &lt;
                </span>
                <span id="right">
                    &gt;
                </span>
            </div>
        </div>
    </div>

    <script>
        //获取元素，方便之后操作
        var view = document.getElementById("view");
        var banner = document.getElementById("banner");
        var fouse = document.getElementById("fouse");
        var ulObj = banner.children[0];
        var list = ulObj.children;
        var olObj = banner.children[1];
        var imgWidth = banner.offsetWidth;
        var pic = 0;
        var left = document.getElementById("left");
        var right = document.getElementById("right");

        //因为是动态创建小圆点，所以不能写死，用for循环遍历ul，得到图片的个数，然后创建小圆点
        for(var i = 0; i < list.length; i++) {
            var liObj = document.createElement("li");
            olObj.appendChild(liObj);
            liObj.innerText = (i + 1);
            //给小圆点动态添加一个index属性
            liObj.setAttribute("index", i)

            //给小圆点按钮注册onmouseover事件
            liObj.onmouseover = function() {
                //清空所有样式
                for(var j = 0; j < olObj.children.length; j++) {
                    olObj.children[j].removeAttribute("class");
                }
                this.className = "current";
                pic = this.getAttribute("index");
                animate(ulObj,-pic*imgWidth);
            }
        }


        olObj.children[0].className = "current";
        //要想实现无缝轮播，要利用视觉差在图片列表最后克隆第一种图片
        ulObj.appendChild(ulObj.children[0].cloneNode(true))
        var timeId = setInterval(onMouseClickHandle,1000)
        view.onmouseover = function() {
            //鼠标悬停，显示切换按钮和清除定时器
            fouse.style.display = "block"
            clearInterval(timeId)
        } 
        view.onmouseout = function() {
            //鼠标移开，隐藏切换按钮和开启定时器
            timeId = setInterval(onMouseClickHandle,1000)
            fouse.style.display = "none"
        }

        //点击切换下一张
        right.onclick = onMouseClickHandle;
        //点击切换上一张
        left.onclick = function() {
            //如果当前是第一张图片
            if(pic == 0) {
                pic = list.length - 1;
                ulObj.style.left = -pic * imgWidth + "px";
                
            }
            pic --;
            animate(ulObj, - pic * imgWidth);
            for(var i = 0;i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            olObj.children[pic].className = "current"
        }
        
        function onMouseClickHandle () {
            //如果是pic的值为5，此时显示第六张图片（内容为第一张），用户会认为看到的是第一张图片，所以当用户点击下一张的时候应该显示第二张图片
            if(pic == list.length - 1) {
                //如何实现从第六张变到第一张
                pic = 0;
                ulObj.style.left = 0 + 'px'//让ul的位置回到默认位置
            }
            pic++//pic++此时pic=1
            animate(ulObj, -pic * imgWidth)
            
            if(pic == list.length - 1) {
                //清除所有小圆点的样式，设置第一个小圆点为高亮状态
                olObj.children[olObj.children.length - 1].className = '';
                olObj.children[0].className = "current"
            }
            else {
                for(var i = 0; i < olObj.children.length; i++) {
                    olObj.children[i].removeAttribute("class");
                }
                olObj.children[pic].className = "current"
            }
        }

        //封装移动任意元素到指定位置的函数
        function animate(elem, target) {
            clearInterval(elem.timeId);
            elem.timeId  = setInterval(function() {
                //获取当前元素位置，为数字类型
                var current = elem.offsetLeft;
                //设置一次移动的距离
                var step = 10;
                //三目运算符，当不等式成立时，结果为冒号前面的值，反之为冒号后面的值
                step = current < target ? step : -step;
                current += step;
                if(Math.abs(current - target) > Math.abs(step)) {
                    elem.style.left = current + "px"
                }else {
                    //清除定时器
                    clearInterval(elem.timeId);
                    //到达指定位置
                    elem.style.left = target + "px"
                }
            },10)
        }

        
    </script>
</body>
</html>
我和上帝闹掰了
关注
  • 6
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现无缝切换轮播图(自动+手动)
清风的博客
07-01 5万+
说起轮播图，大家应该都不陌生，各大购物网站和面试题里都能看到它的身影。 实现上也并不困难，而写这篇文章是想整理一下自己心血来潮写的代码，以及实现过程中的一些思考，大家也可以顺便复习巩固一下。 今天给大家带来的是过渡动画等效果都由JS实现的无缝轮播图。CSS实现轮播图等以后再写。
原生JS实现自动无缝切换轮播图(可鼠标拖动)
莫小猪的菜鸟进阶路
08-17 6488
^ _ ^ 最近参加了一个免费的华为在线课程，上面一个作业是用原生js实现轮播图。练手的同时发现工作中框架用的多。原生的都不如以前那么熟练了。特此写这篇文章记录一下。希望能帮助到一些新手盆友。一起学习吧。 目录功能需求实现思路html & CSS结构分析JS逻辑实现知识点小结 功能需求 功能上要实现以下4个需求： 自动无缝切换图片 鼠标左右拖动切换图片 点击小点切换对应图片 浏览器窗口尺寸改变不影响以上功能 实现思路 html & CSS结构分析 JS逻辑实现 知识
原生JS实现无缝轮播图（完整代码）
最新发布
weixin_51831991的博客
04-08 1037
轮播图的种类，代码的风格和实现方法有很多种，同样的轮播图结构功能不同的人写的代码都各式各样的，只要掌握了方法就按照自己的思路代码习惯来实现，本案例仅供参考交流。
原生 JS 实现无缝轮播图（进阶版）
emm_10_01的博客
01-17 248
实现效果： 完整代码 ： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
Js原生实现无缝滑动轮播图(完整功能)
热门推荐
sxjit的博客
03-24 1万+
实现轮播图是前端学习的一门必修课，也是用来训练js能力。今天我用原生js写了个轮播图，包含无缝衔接、指示器、左右控制器等功能，跟大家分享。先看看效果图： 1. 设计html+css部分 结构很简单，图片部分用ul作容器(本人习惯ul，你们也可以div)，flex布局让里面的li排成一排，因为我们要做的是滑动效果而不是简单显隐。注意，要在最后另外多一个li存放第一张图，这是为了后面实现无缝轮播。 ...
原生JS实现无缝轮播图。
m0_73860660的博客
11-28 639
点击事件，整体图片的来回切换。
原生js实现轮播图带无缝滚动及自动播放
u010234868的专栏
09-19 546
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; border: 0; } .all { width: 500px; hei.
原生js实现无缝轮播图效果
Missxu1895的博客
09-30 159
主要是利用运动轨迹的思想来进行实现 代码：
原生js实现无缝轮播图
10-15
【原生JS实现无缝轮播图】是一种常见的网页动态效果，用于展示一组连续的图片或内容，给用户带来流畅的视觉体验。本文将详细介绍如何利用JavaScript实现这一功能，并提供具体的代码示例。 首先，理解无缝轮播图的...
原生JS实现无缝轮播图片
11-20
总的来说，原生JS实现的无缝轮播图通过JavaScript动画、事件监听和DOM操作实现了图片的自动切换和用户交互。这种技术在现代网页设计中广泛应用，提供了良好的用户体验。理解并掌握这一技术对于前端开发者来说非常...
原生JS实现无缝滚动轮播图
03-11
总结来说，原生JS实现无缝滚动轮播图的关键在于利用CSS相对定位和JavaScript动态改变元素的位置。通过合理地组织HTML结构，设置CSS样式，以及编写JavaScript逻辑，我们可以创建一个功能完善的轮播图组件。这种自定义...
JS-Swiper:使用原生JS实现的无缝轮播图
05-29
原生JS无缝轮播图 ，如果无法打开预览，原因是部分运营商DNS污染（域名指往不正确的IP地址），可以通过 修改hosts文件 / 修改DNS服务器 / 代理 的方式访问 HTML部分 最外层是一个固定宽度且带有overflow: hidden;...
前端原生js实现的无缝切换的轮播图
11-13
本项目标题为“前端原生js实现的无缝切换的轮播图”，意味着我们将探讨如何使用JavaScript的原生功能来创建这样一个功能强大的组件，而不是依赖于jQuery或其他第三方库。 首先，我们需要了解无缝切换轮播图的基本...
原生JS实现无缝滚动轮播图（附加无注释版+详解版）
03-12
无缝轮播图是一种常见的网页元素，用于展示一系列图片或内容，并通过自动或手动切换来创建连续无中断的浏览体验。这种效果在现代网站设计中非常流行，因为它能够吸引用户的注意力并提供动态的用户体验。 首先，我们...
原生js实现无缝轮播图.zip
09-17
以上就是一个基本的原生JavaScript无缝轮播图的实现过程。通过这种方式，我们可以根据项目需求灵活定制轮播图的样式和行为，而无需依赖外部库。这个压缩包中的`swiper-master`可能包含了一个完整的示例项目，你可以...
原生JS实现无缝轮播.zip
08-05
原生JS实现无缝轮播是一种常见的网页动态效果，它能够为用户提供流畅的图像或内容切换体验，无需依赖任何外部库如jQuery。在这个压缩包中，包含的HTML、CSS和JavaScript文件共同构成了一个完整的无缝轮播实现。下面...
原生JavaScript实现的无缝滚动功能详解
10-15
通过以上代码，我们就实现了一个基本的原生JavaScript无缝滚动功能。当然，实际应用中可能需要添加更多的功能，比如自动播放、手动切换、过渡动画等，这可以通过扩展上述代码并引入更复杂的逻辑来实现。同时，为了...
原生js实现自动轮播图
03-24
可以使用 setInterval 和 clearInterval 函数实现自动轮播图。具体的实现代码如下： ``` let sliderIndex = 0; let sliderIntervalId = null; const sliders = document.querySelectorAll('.slider-item'); function displaySlider(index) { sliders.forEach((slider, i) => { if (i === index) { slider.style.display = 'block'; } else { slider.style.display = 'none'; } }); } function startSlider() { sliderIntervalId = setInterval(() => { sliderIndex = (sliderIndex + 1) % sliders.length; displaySlider(sliderIndex); }, 3000); } function stopSlider() { if (sliderIntervalId) { clearInterval(sliderIntervalId); sliderIntervalId = null; } } displaySlider(sliderIndex); startSlider(); ``` 这段代码实现了一个自动轮播图，每隔 3 秒钟自动切换到下一张轮播图，并且在鼠标悬停在轮播图上的时候停止自动轮播，鼠标离开的时候继续轮播。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值