JavaScript轮播图

已于 2025-02-10 16:55:39 修改
阅读量430 收藏 1
点赞数 9
分类专栏： js操作 文章标签： javascript css 前端
于 2024-12-07 16:38:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2403_87729201/article/details/144306244
版权

前端轮播图实现：自动切换、手动切换与页码切换

轮播图是前端开发中常见的功能之一，本文将详细介绍如何实现一个功能完善的轮播图，包括自动切换、手动切换（上一页/下一页）和页码切换。

1. 自动切换轮播图

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动切换轮播图</title>
    <script src="js/轮播图.js" defer></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .container {
            width: 800px;
            height: 500px;
            background-color: red;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .container ul {
            width: 3200px;
            height: 100%;
            background-color: aqua;
            display: flex;
            position: absolute;
        }
        .container ul li {
            list-style: none;
            width: 800px;
        }
        .container ul li img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li><img src="image/45C8E05A4BA6AD530A98C868199A4A3C.jpg" alt=""></li>
            <li><img src="image/9571723BF569A1E74D5E5F23E8D85028.jpg" alt=""></li>
            <li><img src="image/B2727E6B05CE3F2EDC6E49AA027BFDD3.jpg" alt=""></li>
            <li><img src="image/034B86D3B4421A69C1D438088451DF1C.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

JavaScript 实现

// 获取 ul 元素
var ul = document.querySelector("ul");
ul.style.left = "0px";

// 自动切换函数
var change = function () {
    var position = parseInt(ul.style.left) - 800;
    if (position < -2400) {
        position = 0;
    }
    ul.style.left = position + "px";
};

// 设置定时器，每秒切换一次
setInterval(change, 1000);

说明

  • setInterval 用于实现自动切换。

  • 当图片滚动到最后一张时，重置位置为 0，实现循环播放。

2. 手动切换轮播图（上一页/下一页）

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手动切换轮播图</title>
    <script src="js/轮播图.js" defer></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .container {
            width: 800px;
            height: 500px;
            background-color: red;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .container .imgbox {
            width: 3200px;
            height: 100%;
            background-color: aqua;
            display: flex;
            position: absolute;
        }
        .container .imgbox li {
            list-style: none;
            width: 800px;
        }
        .container .imgbox li img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .btn {
            position: absolute;
            width: 750px;
            height: 50px;
            margin: 225px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .btn li {
            list-style: none;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.5);
            text-align: center;
            line-height: 50px;
            border-radius: 25px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="imgbox">
            <li><img src="image/45C8E05A4BA6AD530A98C868199A4A3C.jpg" alt=""></li>
            <li><img src="image/9571723BF569A1E74D5E5F23E8D85028.jpg" alt=""></li>
            <li><img src="image/B2727E6B05CE3F2EDC6E49AA027BFDD3.jpg" alt=""></li>
            <li><img src="image/034B86D3B4421A69C1D438088451DF1C.jpg" alt=""></li>
        </ul>

        <ul class="btn">
            <li class="left"><</li>
            <li class="right">></li>
        </ul>
    </div>
</body>
</html>

JavaScript 实现

// 获取 ul 元素和按钮
var ul = document.querySelector("ul");
var left_btn = document.querySelector(".left");
var right_btn = document.querySelector(".right");
ul.style.left = "0px";

// 轮播切换的核心方法
var change = function (offset) {
    var position = parseInt(ul.style.left) + offset;
    if (position < -2400) {
        position = 0;
    }
    ul.style.left = position + "px";
};

// 上一页切换
left_btn.onclick = function () {
    change(800);
};

// 下一页切换
right_btn.onclick = function () {
    change(-800);
};

// 自动切换
var timer = setInterval(change, 4000);

// 避免手动自动冲突
left_btn.onmouseenter = function () {
    clearInterval(timer);
};
right_btn.onmouseenter = function () {
    clearInterval(timer);
};
left_btn.onmouseleave = function () {
    timer = setInterval(change, 4000);
};
right_btn.onmouseleave = function () {
    timer = setInterval(change, 4000);
};

说明

  • left_btn 和 right_btn 分别实现上一页和下一页切换。

  • 鼠标悬停时停止自动切换，移开后恢复自动切换。

3. 页码切换轮播图

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页码切换轮播图</title>
    <script src="js/轮播图.js" defer></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .container {
            width: 800px;
            height: 500px;
            background-color: red;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .container .imgbox {
            width: 3200px;
            height: 100%;
            background-color: aqua;
            display: flex;
            position: absolute;
        }
        .container .imgbox li {
            list-style: none;
            width: 800px;
        }
        .container .imgbox li img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .btn {
            position: absolute;
            width: 750px;
            height: 50px;
            margin: 225px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .btn li {
            list-style: none;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.5);
            text-align: center;
            line-height: 50px;
            border-radius: 25px;
            cursor: pointer;
        }
        .page {
            position: absolute;
            width: 100%;
            margin-top: 438px;
            display: flex;
            justify-content: center;
        }
        .page li {
            list-style: none;
            border: 1px solid black;
            margin: 0 3px;
            padding: 3px 5px;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.5);
            font-size: 14px;
        }
        .page .current {
            background: rgba(27, 114, 226, 0.5);
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="imgbox">
            <li><img src="image/45C8E05A4BA6AD530A98C868199A4A3C.jpg" alt=""></li>
            <li><img src="image/9571723BF569A1E74D5E5F23E8D85028.jpg" alt=""></li>
            <li><img src="image/B2727E6B05CE3F2EDC6E49AA027BFDD3.jpg" alt=""></li>
            <li><img src="image/034B86D3B4421A69C1D438088451DF1C.jpg" alt=""></li>
        </ul>

        <ul class="btn">
            <li class="left"><</li>
            <li class="right">></li>
        </ul>

        <ul class="page">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>
</html>

JavaScript 实现

// 获取 ul 元素和按钮
var ul = document.querySelector("ul");
var left_btn = document.querySelector(".left");
var right_btn = document.querySelector(".right");
var page_item = document.querySelectorAll(".page li");
ul.style.left = "0px";
var oldpage = 1;

// 轮播切换的核心方法
var change = function (offset) {
    var position = parseInt(ul.style.left) + offset;
    if (position < -2400) {
        position = 0;
    }
    ul.style.left = position + "px";
};

// 上一页切换
left_btn.onclick = function () {
    change(800);
    oldpage--;
    highlight();
};

// 下一页切换
right_btn.onclick = function () {
    change(-800);
    oldpage++;
    highlight();
};

// 自动切换
var timer = setInterval(right_btn.onclick, 4000);

// 避免手动自动冲突
left_btn.onmouseenter = function () {
    clearInterval(timer);
};
right_btn.onmouseenter = function () {
    clearInterval(timer);
};
left_btn.onmouseleave = function () {
    timer = setInterval(left_btn.onclick, 3000);
};
right_btn.onmouseleave = function () {
    timer = setInterval(right_btn.onclick, 4000);
};

// 页码样式切换函数
var highlight = function () {
    if (oldpage > 4) {
        oldpage = 1;
    } else if (oldpage < 1) {
        oldpage = 4;
    }
    for (var i = 0; i < page_item.length; i++) {
        page_item[i].className = "";
        if (i == oldpage - 1) {
            page_item[i].className = "current";
        }
    }
};

// 任意页码切换
for (var i = 0; i < page_item.length; i++) {
    page_item[i].onclick = function () {
        // 图片切换
        change((oldpage - this.innerText) * 800);
        oldpage = this.innerText;

        // 样式切换
        highlight();
    };

    // 鼠标悬停时停止定时器
    page_item[i].onmouseenter = function () {
        clearInterval(timer);
    };

    // 鼠标离开开始定时器
    page_item[i].onmouseleave = function () {
        timer = setInterval(right_btn.onclick, 4000);
    };
}

说明

  • 通过 page_item 实现页码切换。

  • 鼠标悬停在页码上时，停止自动切换，移开后恢复自动切换。

总结

通过以上实现，我们完成了轮播图的三种常见功能：

  1. 自动切换：通过 setInterval 实现。

  2. 手动切换：通过按钮点击事件实现。

  3. 页码切换：通过页码点击事件实现。

希望本文对你实现轮播图功能有所帮助！如果有任何问题，欢迎在评论区留言讨论。 😊

js简单基础轮播图（手动）
m0_55945472的博客
10-19 350
【代码】js简单基础轮播图（手动）
JS实现轮播图点击切换、按钮切换功能
Ass12454548的博客
02-01 3831
这里我直接给的一个div把需要轮播的图片放进去,给了两个button;比较简易,可以参考学习。所有实现的逻辑都在js注释内,可以仔细研究一下,有问题可以留言指出,
原生JS实现手动轮播图效果实例代码
10-17
手动轮播图，为轮播图中的一种，轮播图主要有无缝轮播，手动轮播，延迟轮播，切换轮播等等，轮播图主要用于展现图片，新出商品，词条，又能美观网页。給网页中增加动态效果。接下来通过本文给大家分享原生JS实现手动轮播图的实例代码，一起看看吧
js图片轮播手动切换
Giraffe
12-17 2743
js图片轮播手动切换 var scrollPhoto = new ScrollPicleft(); scrollPhoto.scrollContId = "ISL_Photo"; // 内容容器ID"" scrollPhoto.a
JavaScript随手笔记---轮播图（点击切换）
JMFive的博客
02-16 5726
大家好，又见面了，我是夜阑的狗，本文是专栏 【JavaScript随手笔记】专栏的第3篇文章;今天被丢了一个需求 😀 😀 😀，里面就需要实现轮播图，以前在学校时候实现过，但没做记录（博客），基本就模模糊糊的感觉，所以这次就把实现过程跟原理记录下来；【JavaScript随手笔记】， 此专栏是我是夜阑的狗对JS轮播图实现的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。
js轮播图(手动轮播＋自动轮播)
weixin_68333400的博客
04-19 6761
效果图 一、先获取一下需要用到的元素 var leftbtn=document.querySelector('.leftbtn'); //左按钮 var rightbtn=document.querySelector('.rightbtn'); //右按钮 var windows=document.querySelector('.windows'); //显示窗口区域 var circleul=document.querySelector('.imgbox'
javaScript轮播图实现代码
07-07
JavaScript轮播图是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或用户交互来呈现连续播放的效果。在给定的资源中，我们有`index.html`作为主页面，`images`目录则包含轮播图所需的图片。以下是...
完整JavaScript轮播图代码
08-09
一般用来设置网站图片自动轮播一般用来设置网站图片自动轮播
原生javaScript轮播图手写练习
07-24
javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图...
javascript轮播图片的实现
06-07
在实现JavaScript轮播图的过程中，主要涉及以下几个步骤： 1. **引入资源**：确保引入Swiper插件的CSS和JS文件。在`index.html`中，通常会在`<head>`部分引入CSS文件，而在`<body>`底部或者`<head>`中引入JS文件。...
qt 实现 轮播图效果，且还有 手动 上一页和下一页 已解决
最新发布
PHP代码的博客
03-23 865
QT中有 轮播图的需求，按照正常html版本。只需要配置数组就能搞定，但是c++ qt版本 应该用什么了。第一想到的是采用定时器。
JavaScript简单点击切换效果——轮播图
YIC020920的博客
12-03 3325
如何实现一个简单轮播图效果，通过点击切换图片？在JavaScript内容的实现是使用点击触发事件，改变src图片路径。直接展示JS代码哈！ 以下是大致的效果图>>>下面是我的HTML布局和css样式，还可以继续美化得更好看哦~ 感谢你的观看~
JS实现无缝切换轮播图(自动+手动)
清风的博客
07-01 5万+
说起轮播图，大家应该都不陌生，各大购物网站和面试题里都能看到它的身影。 实现上也并不困难，而写这篇文章是想整理一下自己心血来潮写的代码，以及实现过程中的一些思考，大家也可以顺便复习巩固一下。 今天给大家带来的是过渡动画等效果都由JS实现的无缝轮播图。CSS实现轮播图等以后再写。
原生js(JavaScript)实现手动切换图片效果
shenqh
07-17 2992
手动切换图片只是实现了功能，并没有对页面样式做很好的优化。因为现在只是讲解这个图片切换的功能，没有必要花太多的时间和精力在界面优化上面。下面先把代码和样式图奉上再进行讲解。 代码： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&g...
JS实现图片轮播效果（自动和手动）
热门推荐
呵呵到天亮的博客
05-30 21万+
本次轮播效果图如下：具有以下功能：1.自动播放（鼠标进入显示区域时停止播放） 2.左右焦点切换 3.底下小按钮切换以下为实现代码：首先是html代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;最简单的轮播效果&amp
JS案例 手动轮播图 正常模式与循环模式
勤能补拙
01-22 481
直接贴上代码：  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Author" content="Fly"&gt; &lt;title&gt;TZ-作业-图片点击切换&lt;/ti
javascript实现一个简单的图片轮播和手动播放
lzpzwy的博客
04-24 4202
&lt;!DOCTYPE html&gt; //还有许多地方有待改善  &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片滚动播放效果&lt;/title&gt; &lt;script&gt; function init(){ //每1000毫秒自动下一张图片
JS实现轮播图（手动切换+自动切换两种方法）
dweblover的博客
02-13 5万+
1.轮播图效果图 2.完整代码如下 &amp;amp;amp;lt;!doctype html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;utf-8&amp;amp;quot;&amp;amp;amp;gt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值