轮播图的实现

最新推荐文章于 2024-09-29 14:00:00 发布
最新推荐文章于 2024-09-29 14:00:00 发布
阅读量210 收藏
点赞数
文章标签： css html 前端 html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yydny/article/details/129665082
版权
该代码示例展示了如何使用HTML结构、CSS样式以及JavaScript脚本来创建一个带有左右箭头和小圆点导航的轮播图。图片可以自动切换，用户也可以通过点击箭头或小圆点来手动切换。
摘要由CSDN通过智能技术生成

<!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">

    <title>轮播图</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .bg {

            width: 1280px;

            height: 850px;

            margin: 0px auto;

            background-color: orange;

            position: relative;

        }

        .scroll {

            width: inherit;

            height: inherit;

            display: inline-block;

        }

        .dots {

            cursor: pointer;

            position: absolute;

            bottom: 0%;

            left: 50%;

            transform: translate(-50%, 0);

            display: flex;

            justify-content: center;

            align-items: flex-end;

            width: 200px;

            height: 60px;

        }

        .dots span {

            display: inline-block;

            margin-left: 10px;

            margin-bottom: 10px;

            width: 10px;

            height: 10px;

            border: 2px solid #fff;

            border-radius: 100%;

            background-color: rgba(255, 255, 255, 0.2);

        }

        .left,

        .right {

            user-select: none;

            color: #c7c7c7;

            text-align: center;

            position: absolute;

            top: 50%;

            transform: translate(0, -50%);

            font-size: 3em;

            display: inline-block;

            width: 150px;

            height: 100px;

            line-height: 100px;

            background-color: #fff;

            opacity: .5;

        }

        .left:hover,

        .right:hover {

            background-color: #f2f2f2;

        }

        .left {

            right: 0px;

        }

        .right {

            left: 0px;

        }

        span.active {

            background-color: #04AA6D;

        }

        .bg .scroll img:not(.current) {

            display: none;

        }

        .current {

            display: block;

            float: left;

            width: inherit;

            height: inherit;

        }

    </style>

</head>

<body>

    <div class="bg">

        <div class="scroll">

            <img class="current" src="images/1.jpg" data-id="0" alt="">

            <img src="images/2.jpg" data-id="1" alt="">

            <img src="images/3.jpg" data-id="2" alt="">

            <img src="images/4.jpg" data-id="3" alt="">

        </div>

        <div class="left">&gt;</div>

        <div class="right">&lt;</div>

                <div class="dots">

                    <span class="active" data-id="0"></span>

                    <span data-id="1"></span>

                    <span data-id="2"></span>

                    <span data-id="3"></span>

                </div>

        </div>

</body>

</html>

<script type="text/javascript">

// 轮播图的实现主要通过js操作css样，即为图片和小圆点添加激活的样式

    //获取图片

    const img = document.getElementsByTagName("img");

    //获取左按钮

    const btnL = document.getElementsByClassName("left");

    //获取右按钮

    const btnR = document.getElementsByClassName("right");

    // 获取小圆点

    const dots = document.getElementsByTagName("span");

    //定义变量记录当前在播放第几张图片，默认第零张开始

    let index = 0;

    //定义下一张函数

    function next() {

        // 取消自动播放下一张

        clearInterval(autoNext);

        // 如果当前是最后一张图片返回第一张，或者播放下一张

        if (index == 3) {

            // 把index改为第一张图片的索引

            index = 0;

            //调用激活图片函数

            setActive(index);

        } else {

            // 把index改为下一张图片的索引

            index++;

            //调用激活图片函数

            setActive(index);

        }

        //两秒中后不再手动点击下一张再开启自动播放

        autoNext = setInterval(() => {

            next();

        }, 2000);

    }

    //定义上一张函数

    function back() {

         // 取消自动播放下一张

        clearInterval(autoNext);

         // 如果当前是第一张图片返回最后一张，或者播放下一张

        if (index == 0) {

            // 把index改为第三张图片的索引

            index = 3;

            //调用激活图片函数

            setActive(index)

        } else {

            // 把index改为下一张图片的索引

            index--;

            //调用激活图片函数

            setActive(index);

        }

        //两秒中后不再手动点击上一张再开启自动播放

        autoNext = setInterval(() => {

            next();

        }, 2000);

    }

    //左按钮监听点击事件

    btnL[0].addEventListener("click", next)

    //右按钮监听点击事件

    btnR[0].addEventListener("click", back)

    //自动播放下一张

    let autoNext = setInterval(() => {

        //调用next函数播放下一张

        next();

    }, 2000);

    //启用addDots函数

    addDots();

    //监听小圆点点击

    function addDots(){

        // 为每个小圆点添加监听事件

        for (let i = 0; i < dots.length; i++) {

        dots[i].addEventListener('click', () => {

            //停止自动播放

            clearInterval(autoNext);

            // 获取点击哪一个小圆点

            index = dots[i].getAttribute('data-id');

            //调用激活图片函数

            setActive(index);

            //两秒中后无点击操作再次开启自动播放

            autoNext = setInterval(() => {

            next();

        }, 2000);

        })

    }

    }

    //激活图片函数

    function setActive(e) {

        //清空当前激活的图片，为了方便所以遍历清空每一个图片和小圆点的active样式和current样式

        for (let i = 0; i < dots.length; i++) {

            //去掉active样式

            dots[i].classList.remove('active');

            // 去掉current样式

            img[i].classList.remove('current');

        }

        // 为需要激活的图片和小圆点添加current样式和active样式

        img[e].className = "current";

        dots[e].className = "active";

    }

</script>

yydny
关注
轮播图·实现
m0_70217633的博客
04-01 1047
https://pan.baidu.com/s/1d0_o5I81CrVJ12kfa52gjw
如何在CSS中实现轮播图
zbzuikeai的博客
08-07 6329
想必大家都会比较好奇各种网站里面的轮播图是怎么实现的，在这里就跟大家说一下CSS中如何实现轮播图动画。 首先设置一个大的div，如图 然后在这个div中再建立一个放图片的div，注意，此div的width为你所有图片width的总和，如图 然后在class=one的div中用overflow:hidden来隐藏溢出内容 这时可以使用@keyframes来进行轮播图的设置，其中@keyframes后面需写好一个名字，然后from中是起始位置，to为终止位置，如图 @keyframes name{
如何实现轮播图
VIP_CR的博客
12-28 5926
如何实现轮播图（转载） 版权声明：本文为CSDN博主「_Kattem」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weixin_42276859/article/details/80648944 1.介绍 轮播图，顾名思义，轮流播放的广告图。它是由网页banner进化而来，通常放在屏幕最显眼...
什么是轮播图？如何实现轮播图？有几种方法
最新发布
QQ1257871322的博客
09-29 510
手动实现：适合学习和灵活定制。使用库：快速实现，易于维护。CSS动画：不依赖JavaScript，适合简单场景。根据具体需求和复杂程度，可以选择适合的方法来实现轮播图。
如何实现轮播图？
天心天地生的博客
10-09 507
通过以下的5个过程，实现轮播图的轮播效果 1.动态生成结构 创建元素和插入元素的方法分别是什么？ 创建元素：document.creatElement( tagName ) var li = document.creatElement(“li”)； 插入元素：appendChild( element ) ol.appendChild(“li”); 通过什么方法复制第一张图片元素？ 通过cloneN...
轮播图实现
liubo0523的博客
02-28 197
代码： *{ margin: 0; padding: 0; } #box{ width: 1200px; height: 535px; border: 2px solid darkblue; margin: 30px auto; position: relative;
轮播图实现过程.rar
06-13
本压缩包“轮播图实现过程.rar”提供了实现轮播图的完整流程，包括图片和操作代码，适用于在浏览器环境或Visual Studio Code (VScode) 等开发环境中进行实践。 轮播图的核心技术主要包括JavaScript和DOM操作。...
JS轮播图实现简单代码
10-19
JavaScript（JS）轮播图是一种常见的网页动态效果，它允许用户在一组图片或内容之间进行无缝切换，通常用于展示产品、新闻或者任何需要滚动展示的信息。以下是对标题和描述中所述知识点的详细解释： 1. **容器布局*...
javaScript轮播图实现代码
07-07
- 图片切换：使用DOM操作（如`getElementById`、`getElementsByClassName`或`querySelector`等）选取需要切换的元素，然后改变其样式（如`display`属性）来实现图片的切换。 - 指示器和导航箭头：如果存在，可以...
轮播图功能实现
01-30
众所周知,轮播图是被广泛的运用的。 轮播图我们在很多的网站上都可以看到,例如淘宝、京东这些网站都很常见。 下面开始我们的轮播之旅: 搭建我们的骨架
轮播图的简单实现
HeartzzZZ的博客
03-24 1438
在动手写之前，先来分析一下 可以看到的是轮播图的执行方式主要有两种，一种是通过左边的按钮来进行切换图片，一种是通过右边的按钮来进行切换。下面我们就来分析一下通过右边的按钮来切换图片。 右边按钮 首先我们定义一个变量index，当我们点击右边按钮的时候，index需要加1。但是这个index也不能无限的去增加，不然的话当我们的index超过轮播图里面放的图片数量的时候，它就不会进行切换了，会卡在...
android 轮播图实现
06-20
在Android开发中，轮播图（Carousel）是一种常见的UI组件，通常用于展示广告、推荐内容或者图片展示等。本篇文章将深入探讨如何在Android中实现一个功能完善的轮播图，主要涉及的技术点包括自定义ViewPager、...
实现轮播图效果
qq_14815199的博客
05-03 2024
该文档实现的效果如下： 1. 轮播图获得焦点时，显示左右箭头，并停止轮播图自动播放 2. 实现点击左右箭头时，轮播图自动向左或向右，并且小圆点跟随运动 3. 点击小圆点时，图片切换到对应的图片 4. 自动轮播，每2s一次
自动轮播图的实现
m0_46655386的博客
12-04 1382
js自动轮播图
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值