HTML+CSS+JavaScript:轮播图自动播放

这篇具有很好参考价值的文章主要介绍了HTML+CSS+JavaScript:轮播图自动播放。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、需求

轮播图如下图所示,需求是每隔一秒轮播图自动切换一次

HTML+CSS+JavaScript:轮播图自动播放,html,css,javascript

 

二、代码素材

以下是缺失JS部分的代码,感兴趣的小伙伴可以先自己试着写一写

<!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>
        * {
            box-sizing: border-box;
        }

        .slider {
            width: 560px;
            height: 400px;
            overflow: hidden;
        }

        .slider-wrapper {
            width: 100%;
            height: 320px;
        }

        .slider-wrapper img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .slider-footer {
            height: 80px;
            background-color: rgb(100, 67, 68);
            padding: 12px 12px 0 12px;
            position: relative;
        }

        .slider-footer .toggle {
            position: absolute;
            right: 0;
            top: 12px;
            display: flex;
        }

        .slider-footer .toggle button {
            margin-right: 12px;
            width: 28px;
            height: 28px;
            appearance: none;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }

        .slider-footer .toggle button:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .slider-footer p {
            margin: 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
        }

        .slider-indicator {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
        }

        .slider-indicator li {
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
            opacity: 0.4;
            cursor: pointer;
        }

        .slider-indicator li.active {
            width: 12px;
            height: 12px;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="slider">
        <div class="slider-wrapper">
            <img src="./images/slider01.jpg" alt="" />
        </div>
        <div class="slider-footer">
            <p>对人类来说会不会太超前了?</p>
            <ul class="slider-indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="toggle">
                <button class="prev">&lt;</button>
                <button class="next">&gt;</button>
            </div>
        </div>
    </div>
    <script>
        // 1. 初始数据
        const sliderData = [
            { url: './images/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },
            { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },
            { url: './images/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },
            { url: './images/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
            { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
            { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
            { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },
            { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },
        ]
    </script>
</body>

</html>

三、算法思路

1、将代码素材在浏览器中打开,并按F12进入开发者模式,分析各个HTML标签在轮播图中的位置及作用

2、获取相关元素

3、利用间歇函数实现一秒切换一次的功能,间歇函数中的计数器 i 配合素材代码中的数组对象实现图片和文字等样式的顺序播放文章来源地址https://www.toymoban.com/news/detail-621334.html

四、完整代码

<!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>
        * {
            box-sizing: border-box;
        }

        .slider {
            width: 560px;
            height: 400px;
            overflow: hidden;
        }

        .slider-wrapper {
            width: 100%;
            height: 320px;
        }

        .slider-wrapper img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .slider-footer {
            height: 80px;
            background-color: rgb(100, 67, 68);
            padding: 12px 12px 0 12px;
            position: relative;
        }

        .slider-footer .toggle {
            position: absolute;
            right: 0;
            top: 12px;
            display: flex;
        }

        .slider-footer .toggle button {
            margin-right: 12px;
            width: 28px;
            height: 28px;
            appearance: none;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }

        .slider-footer .toggle button:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .slider-footer p {
            margin: 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
        }

        .slider-indicator {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
        }

        .slider-indicator li {
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
            opacity: 0.4;
            cursor: pointer;
        }

        .slider-indicator li.active {
            width: 12px;
            height: 12px;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="slider">
        <div class="slider-wrapper">
            <img src="./images/slider01.jpg" alt="" />
        </div>
        <div class="slider-footer">
            <p>对人类来说会不会太超前了?</p>
            <ul class="slider-indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="toggle">
                <button class="prev">&lt;</button>
                <button class="next">&gt;</button>
            </div>
        </div>
    </div>
    <script>
        // 1. 初始数据
        const sliderData = [
            { url: './images/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },
            { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },
            { url: './images/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },
            { url: './images/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
            { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
            { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
            { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },
            { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },
        ]

        const img=document.querySelector('.slider-wrapper img')
        const p=document.querySelector('.slider-footer p')
        const ul=document.querySelector('.slider-footer .slider-indicator')
        const footer=document.querySelector('.slider-footer')

        let i=0
        setInterval(()=>{
            i = (i + 1) % 8
            img.src=`./images/slider0${i+1}.jpg`
            p.innerHTML=sliderData[i].title
            footer.style.backgroundColor=sliderData[i].color
            //注意classList.remove()括号中的类名不需要加点号!
            document.querySelector('.slider-indicator .active').classList.remove('active')
            document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
        },1000)
    </script>
</body>

</html>

到了这里,关于HTML+CSS+JavaScript:轮播图自动播放的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 没有 JavaScript 计时器的自动播放轮播 - CSS 动画

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 先看效果: 再看代码(查看更多):

    2024年02月11日
    浏览(41)
  • HTML+CSS:3D轮播卡片

    实现了一个3D翻转的卡片动画,其中每个卡片都有不同的图片和不同的旋转角度。整个动画循环播放,无限次。整个页面的背景是一个占据整个屏幕的背景图片,并且页面内容被隐藏在背景图片之下。 这段代码设置了页面的基本样式,包括高度、居中、背景颜色和溢出部分的

    2024年01月23日
    浏览(56)
  • HTML+CSS+JS:焦点轮播

    实现了一个简单的图片展示和交互效果,用户可以点击不同的图片进行查看,并且会有视觉反馈。

    2024年02月19日
    浏览(41)
  • 学过html都会的html轮播图

    为什么说学过html都会? 因为我也刚学没多久,所运用的知识都是基础 两种方法创建出简单的轮播图 1.通过 javascript 去解决图片轮播 网页预览[github可能图片加载的有点慢] 2.通过引用 bootstrap 去创建轮播图 网页预览[github可能图片加载的有点慢] 预览 ! id 随意,但不能重复!

    2024年02月03日
    浏览(39)
  • css实现轮播图

    轮播图:就是多张图片按照一定的时间和顺序依次从某个窗口来向用户展示图片 1)创建一个容器来进行轮播图的展示 这里的容器就是最外部的盒子 注意最外部盒子设置宽高时要与我们进行展示的图片的宽高保持一致,这样就可以保证一次轮播一张图片 /* overflow: hidden; 溢出

    2023年04月09日
    浏览(53)
  • CSS3 -- 3D轮播图

    今天在完善我自己的个人网站时,要做一个3D轮播图,就是一个六边体,在六边体的每个面都放一张图片,但是每个边之间都会有一定的间距,效果如下: 点击两边的按钮会旋转切换图片,每隔4秒会自动切换。 在我初学的时候我觉得这个效果非常的有意思,很高大上,哈哈

    2024年02月12日
    浏览(44)
  • css3轮播图案例

    轮播图案例

    2024年01月20日
    浏览(55)
  • css实现轮播图弧形

     

    2024年04月26日
    浏览(34)
  • HTML+CSS+JavaScript华为主页

    HTML+CSS+JavaScript仿华为首页

    2024年02月11日
    浏览(61)
  • html +css + JavaScript 期末复盘

    实验一中的制作表格代码(亦可回顾https://blog.csdn.net/qq_52495761/article/details/134759245) 上述的两种形式都可以实现对div中方文字进行渲染 使用标签做外观渲染的 缺点 : 1)一眼看过去,看到的都是做外观的标签, 不容易阅读到正文 2)内容和外观相混合, 无法做到合理分工

    2024年02月02日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包