呼吸轮播图

最新推荐文章于 2023-07-15 10:52:49 发布
最新推荐文章于 2023-07-15 10:52:49 发布
阅读量119 收藏
点赞数
文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cmondd/article/details/129171835
版权

<!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>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .box {

            width: 500px;

            height: 300px;

            margin: 0 auto;

            margin-top: 10%;

            position: relative;

            border: 1px solid #000;

        }

        .left {

            width: 20px;

            height: 50px;

            line-height: 50px;

            position: absolute;

            top: 40%;

            background-color: rgb(240, 240, 235, .5);

        }

        .right {

            width: 20px;

            height: 50px;

            line-height: 50px;

            position: absolute;

            right: 0;

            top: 40%;

            background-color: rgb(240, 240, 235, .5);

        }

        img {

            width: 500px;

            height: 300px;

        }

    </style>

</head>

<body>

    <div class="box" id="box">

        <button class="left">《</button>

        <button class="right">》</button>

    </div>

    <script>

        var arr = [

            'https://img2.baidu.com/it/u=1003272215,1878948666&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',

            'https://img2.baidu.com/it/u=3038223445,2416689412&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',

            'https://img2.baidu.com/it/u=2969169350,1551254405&fm=253&fmt=auto&app=120&f=PNG?w=1280&h=800',

            'https://img0.baidu.com/it/u=3004830896,1136484098&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'

        ];

        const box = document.getElementById("box")

        const btn = document.querySelectorAll("button")

        var index = 2

        let lock = true

        var timer

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

            var img = document.createElement("img")

            img.src = arr[i]

            box.appendChild(img)

            img.style.display = "none"

        }

        box.children[2].style.display = "block"

        const imgs = document.querySelectorAll("img");

        let i = setInterval(function () {

            box.children[index].style.display = "none"

            if (index == 5) {

                index = 2

            } else {

                index++

            }

            box.children[index].style.display = "block"

            box.onmouseenter = function () {

                btn[0].style.display = "block"

                btn[1].style.display = "block"

                clearInterval(i)

            }

            box.onmouseleave = function () {

                btn[0].style.display = "none"

                btn[1].style.display = "none"

                i = setInterval(function () {

                    box.children[index].style.display = "none"

                    if (index == 5) {

                        index = 2

                    } else {

                        index++

                    }

                    box.children[index].style.display = "block"

                }, 1000)

            }

        }, 1000)

        var temp = 0

        btn[1].onclick = function () {

            imgs[temp].style.display = "none"

            if (temp == 3) {

                temp = 0

            } else {

                temp++

            }

            imgs[temp].style.display = "block"

        }

        btn[0].onclick = function () {

            imgs[temp].style.display = "none"

            if (temp == 0) {

                temp = 3

            } else {

                temp--

            }

            imgs[temp].style.display = "block"

        }

        // 按钮进入和离开事件

        /* box.onmouseenter = function () {

            btn[0].style.display = "block"

            btn[1].style.display = "block"

        }

        box.onmouseleave = function () {

            btn[0].style.display = "none"

            btn[1].style.display = "none"

        } */


 

    </script>

</body>

</html>

cmondd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
呼吸轮播
秋恨雪
10-11 1701
本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。这一节所介绍的呼吸轮播是在上一节中介绍的 干蹦轮播 基础上进行改版而产生的。先看看最终的效果。一、淡入淡出（同时执行）二、淡入淡出（先淡出后淡入）代码分析：1. html代码如下：&lt;body&gt; &lt;div id="container"&gt; &lt;ul id="conte...
jQuery呼吸轮播图
liux6687的博客
05-18 817
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; * { padding: 0; m
呼吸碎片轮播北大青鸟
01-23
碎片轮播，这一款没有3D效果，但是演讲的时候是足够用了，效果也很炫
jquery带缩略图的轮播图代码
12-12
3. **jQuery脚本**：核心功能由jQuery代码实现，包括轮播图的初始化、图片切换逻辑、动画效果以及对缩略图点击事件的响应。 4. **事件处理**：使用jQuery的`.on()`方法监听用户的点击事件，当用户点击缩略图或使用...
通过css3动画和opacity透明度实现呼吸灯效果
12-10
由于`animation-direction: alternate`的作用，元素会在这两个状态之间来回切换，从而呈现出呼吸灯的明暗效果。 为了使效果更加逼真，我们还可以添加其他样式。比如，给元素设置一个圆形边框（`border-radius: 50%`...
呼吸轮播图基础布局
王延朕的博客
05-13 197
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>呼吸轮播图</title> <style> *{ padding: 0px; margin: 0px; } ul,ol{ list-style:
jQuery轮播图 - 呼吸式 -
weixin_41170223的博客
11-30 702
html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> style type="text/css"> *{ padding:0; margin:0; list-style: none;
原生JS实现呼吸轮播图
越陌度阡
08-14 666
今天给大家分享一个用原生JS实现的呼吸轮播图，效果如下： 以下是代码实现，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>原生JS实现呼吸轮播图</title> <style> ............
呼吸轮播图制作原理
qq_36982349的博客
10-08 466
呼吸轮播图 轮播图：carousel 呼吸轮播图变种布局重点：所有的图片摞一起。 jquery选择元素的能力非常好，但是我们习惯将用到的元素，提前保存到变量。通常我们使用id选中元素。一般我们以$box。 左右按钮防流氓的策略：当图片运动时，不进行任何操作。is() 小圆点的防流氓的策略：立即响应新事件。stop(true) 注意：使用代码时将图片更换，以及需要引入jquery库。 举例： &lt...
带缩略图的轮播图
chen_feng_123的博客
08-10 2167
实现一个带缩略图的轮播图，缩略图可以点击改变展示内容。
Vue框架使用swiper5实现带缩略图的轮播图
最新发布
sunxiaobai1的博客
07-15 527
【代码】Vue框架使用swiper5实现带缩略图的轮播图。
js网页呼吸轮播图
m0_73500412的博客
03-10 91
jquery京东网页呼吸轮播图，记得引入jq文件
呼吸轮播特效
xuehaocyuyan的博客
08-15 133
呼吸轮播特效 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.
vue中实现带缩略图得轮播图（vue-awesome-swiper）
行内元素如何居中
02-10 2613
1.引入swiper和vue-awesome-swiper插件 npm install swiper@4 --save npm install vue-awesome-swiper@3 --save 2.在main.js中引入： import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) import '../node_modules/swiper/dist/css/swiper.css' 3.使用： tem
轮播图 带有缩略图
seb_lin666的博客
02-25 2425
设计给了个图 要求轮播带有 缩略图 选样式还要放大 如下图 在网上找了下没有有相似的 但还是与设计图有些差距 无奈 找了原来的代码 以此为基础 改呗 主要的还是缩略图的点击 放大 缩小 以及大于5时选中第5个小图时 整体滚动就是个小的轮播 无论是点击上一个、下一个、还是缩略图 当选中的缩略图为 第一个或第五个时（下图选中放大的为第三个） 做判断 第一个：获取当前元素前面有几个兄弟元素 如果大于等于...
显示一些图片点击切换轮播图
06-09
可以使用HTML、CSS和JavaScript来实现点击切换轮播图的效果。 以下是一个简单的实现方式： ... ... ...在上述代码中，我们首先定义了一个...同时，你也可以通过添加更多的图片和修改JavaScript代码来实现更多的轮播图效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值