javaScript学习笔记（四）案例篇（无缝连接轮播、跑马灯轮播、呼吸轮播）

最新推荐文章于 2022-06-26 22:50:24 发布
最新推荐文章于 2022-06-26 22:50:24 发布
阅读量115 收藏 1
点赞数
分类专栏： 慕课 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42113778/article/details/118092196
版权

轮播案例

一、无缝连接轮播

在这里插入图片描述

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 700px;
            height: 130px;
            overflow: hidden;
            margin: 100px auto;
        }

        .box ul {
            list-style-type: none;
            display: flex;
            position: relative;
            left: 0;
            text-align: center;
        }

        .box ul li {
            width: 200px;
            height: 130px;
            /* margin-right: 10px; */
        }
    </style>
</head>

<body>
    <div class="box">
        <ul id='list'>
            <li><img src="./images//number/0.png" alt=""></li>
            <li><img src="./images//number/1.png" alt=""></li>
            <li><img src="./images//number/2.png" alt=""></li>
            <li><img src="./images//number/3.png" alt=""></li>
            <li><img src="./images//number/4.png" alt=""></li>
            <li><img src="./images//number/5.png" alt=""></li>
        </ul>
    </div>
</body>

<script>
    var list = document.getElementById('list')
    var listClone = list.cloneNode(true)
    list.innerHTML += listClone.innerHTML
    var left = 0
    move()
    var timer
    function move() {
        clearInterval(timer);
        timer = setInterval(() => {
            left -= 4
            if (left <= -1200) {
                left = 0
            }
            list.style.left = left + 'px'
        }, 20)

    }
    list.onmouseenter = function () {
        clearInterval(timer)
    }
    list.onmouseleave = function () {
        move()
    }
</script>

</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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 650px;
            height: 360px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }

        .box ul {
            display: flex;
            list-style-type: none;
            transition: all .5s ease 0s;
            position: relative;
            left: 0;

        }

        .btn {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: aquamarine;
            top: 50%;
            margin-top: -25px;
            border: 0px;
            border-radius: 50%;
        }

        .left {
            left: 5px;
        }

        .rigth {
            right: 5px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul id='list'>
            <li> <img src="./images/beijing/0.jpg" alt=""></li>
            <li> <img src="./images/beijing/1.jpg" alt=""></li>
            <li> <img src="./images/beijing/2.jpg" alt=""></li>
            <li> <img src="./images/beijing/3.jpg" alt=""></li>
            <li> <img src="./images/beijing/4.jpg" alt=""></li>
        </ul>
        <button class="left btn" onclick="toLeft()"></button>
        <button class="rigth btn" onclick="toRight()"></button>
    </div>
    <script>
        var list = document.getElementById('list')
        var cloneFirstNode = list.firstElementChild.cloneNode(true)
        list.append(cloneFirstNode)
        var flag = 0
        var lock = true
        function toRight() {
            if (!lock) return
            lock = false
            list.style.transition = 'all .5s ease 0s'
            flag++
            console.log(flag)
            if (flag > 4) {
                setTimeout(_ => {
                    list.style.transition = 'none'
                    flag = 0
                    list.style.left = 0 + 'px'
                }, 500)
            }
            list.style.left = -650 * flag + 'px'
            setTimeout(_ => {
                lock = true
            }, 500)
        }


        function toLeft() {
            if (!lock) return
            lock = false
            flag--
            if (flag < 0) {
                list.style.transition = 'none'
                list.style.left = -650 * 5 + 'px'
                setTimeout(_ => {
                    list.style.transition = 'all .5s ease 0s'
                    flag = 4
                    list.style.left = -650 * flag + 'px'
                }, 0)
            } else {
                list.style.left = -650 * flag + 'px'
            }
            setTimeout(_ => {
                lock = true
            }, 500)
        }


    </script>
</body>

</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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 650px;
            height: 360px;
            margin: 100px auto;
            position: relative;
        }

        .box ul {
            list-style-type: none;
            transition: all .5s ease 0s;

        }

        .box ul li {
            transition: all 0.5s ease 0s;
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
        }

        .box ul>li:first-child {

            opacity: 1;
        }

        .btn {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: aquamarine;
            top: 50%;
            margin-top: -25px;
            border: 0px;
            border-radius: 50%;
        }

        .left {
            left: 5px;
        }

        .rigth {
            right: 5px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul id='list'>
            <li> <img src="./images/beijing/0.jpg" alt=""></li>
            <li> <img src="./images/beijing/1.jpg" alt=""></li>
            <li> <img src="./images/beijing/2.jpg" alt=""></li>
            <li> <img src="./images/beijing/3.jpg" alt=""></li>
            <li> <img src="./images/beijing/4.jpg" alt=""></li>
        </ul>
        <button class="left btn" onclick="toLeft()"></button>
        <button class="rigth btn" onclick="toRight()"></button>
    </div>
    <script>
        var list = document.getElementById('list').children
        var flag = 0
        var lock = true
        function toRight() {
            if (!lock) return
            lock = false
            list[flag].style.opacity = 0
            flag++
            if (flag > 4) {
                flag = 0
            }
            list[flag].style.opacity = 1

            setTimeout(_ => {
                lock = true
            }, 500)
        }
        function toLeft() {
            if (!lock) return
            lock = false

            list[flag].style.opacity = 0
            flag--
            console.log(flag)
            if (flag < 0) {
                flag = 4
            }
            list[flag].style.opacity = 1

            setTimeout(_ => {
                lock = true
            }, 500)
        }


    </script>
</body>

</html>
可嘞
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现走马灯效果[无缝连接、循环滚动]
anmi5580的博客
09-18 1534
JavaScript实现走马灯效果[无缝连接、循环滚动] 无缝跑马灯效果以下代码在IE6、Firefox+Win2k环境下测试通过网页走马灯连续循环滚动一、向上的无缝循环滚动 HTML代码 <!-- 指向链接图片的URL --> <base href="<a href="http://blog.netfetch.cn" target="_blank"&...
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
10-29
字逐行或多行滚动跑马灯插件，基于Jquery。命名为Jquery.RollTitle。支持在一个页面声明多个滚动区 (就为了要这点才写了这个)
支持图片左右轮播上下无缝切换的jQuery插件特效.zip
07-05
效果描述： 简单易用的jQuery图片滚动插件 支持图片向左、向右、向上、向下滚动等各种方法 也支持手动点击切换或者banner轮播图等等效果 使用方法： 1、将CSS代码引入到你的网页中 2、将body中的代码部分拷贝到你的页面中
js实现新闻列表连续的滚动效果
08-26
通过js实现的新闻列表的滚动效果 效果为连续滚动
JavaScript实现走马灯效果,上 下 左 右无缝连接、循环滚动
webkook
08-19 1184
    &lt;!-- 指向链接图片的URL --&gt; &lt;div align="center" id="demo" style="overflow:hidden;height:100px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;"&gt; &lt;div id="dem.
JavaScript基于面向对象实现的无缝滚动轮播示例
10-15
主要介绍了JavaScript基于面向对象实现的无缝滚动轮播,结合实例形式分析了JavaScript面向对象实现的无缝滚动轮播相关对象定义、初始化及功能实现技巧,需要的朋友可以参考下
JavaScript案例-js轮播图
02-16
JavaScript案例-js轮播图
javaScript实现最终版无缝轮播优化
12-21
javaScript实现最终版无缝轮播优化经典案例
javaScript实现的无缝轮播
12-21
javaScript实现的无缝轮播经典案例
html连续跑马灯无缝连接,无缝跑马灯实现（！marquee）
weixin_32860759的博客
06-05 950
一般我们需要实现一个简单的跑马灯，我们可以使用标签，但是会存在一个问题，轮播的时候并不是连续的，循环播放的时候中间有段时间会出现白色空白。image那么有没有什么办法让循环播放的时候中途不出现空白呢？具体实现代码如下：跑马灯.wrapper{overflow: hidden;white-space: nowrap;width: 500px;border: solid 1px #000;}.cont...
原生JS实现图片跑马灯特效
越陌度阡
08-12 2984
今天给大家分享一个用原生JS实现的图片跑马灯特效，效果如下： 实现的代码如下，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>.........
(转)无缝连接、循环滚动的走马灯效果
jcyka的专栏
02-09 1050
JavaScript实现走马灯效果[无缝连接、循环滚动] 无缝跑马灯效果 以下代码在IE6、Firefox+Win2k环境下测试通过 一、向上的无缝循环滚动 HTML代码 &lt;!-- 指向链接图片的URL --&gt;&lt;base href="&lt;a href="http://blog.ad0.cn" target="_blank"&gt;http://blog.ad0.cn&lt...
jQuery跑马灯（轮询图片或div）
qq_22325259的博客
06-26 1059
jQuery跑马灯（轮询图片或div）
如何用vue写一个文字消息轮播列表(纯前端实现)
修仙程序员的博客
11-27 8552
效果展示 2
jquery实现图片的跑马灯效果
farmerXU的博客
10-12 1585
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script src="jquery-3.2.1.min.js"></script> <st.
使用JS实现图片轮播（前后首尾相接）
09-20 975
最近各种跑面试，终于还是被问到这个，一脑子浆糊，当时没想出来首尾相接怎么搞，回来之后研究了一波，终于搞出来了，不多说，直接看代码 代码参考了一位已经写好了图片轮播功能的（在此表示感谢），但是没有首尾相接的功能，本人在此基础上增加了首尾相接功能。 效果如下：（在线演示地址） 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1....
web前端之轮播实现自动播放。
过客匆匆，恍如烟
11-30 3992
*{ padding: 0px; margin: 0px; font-family: "微软雅黑", "宋体"; } body{ position: relative; } #box{ overflow: hidde
杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
杨校的博客
05-03 1693
 JavaScript案例之跑马灯左右无缝连接效果图：思路：    1.先做界面        1.1 制作一个大盒子，进行存放整个图片及按钮区域        1.2 制作两个按钮和中间区域盒子        1.3 中间区域盒子中使用无序列表进行排放图片，并且每个图片可以作为一个链接进行点击    2..CSS        2.1 清除全局的外边距和内边距        2.2 去除无序列表...
vue3 css 跑马灯轮播图
最新发布
03-15
CSS跑马灯轮播图是一种常见的网页元素，用于展示多张图片或内容，并以动画的方式进行切换。在Vue3中，可以通过以下步骤来实现CSS跑马灯轮播图： 1. 创建一个Vue组件，命名为Carousel。 2. 在组件中定义一个data属性...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值