CSS——css+javascript轮播图/弹幕

最新推荐文章于 2023-05-29 08:50:51 发布
最新推荐文章于 2023-05-29 08:50:51 发布
阅读量1k 收藏 21
点赞数 1
分类专栏： CSS 文章标签： css JavaScript 轮播图 js动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44593720/article/details/118106933
版权

1.transform方式实现轮播图

1.1 实现效果

在这里插入图片描述

1.2 实现原理

  • 一个包含轮播内容的容器，超出容器部分隐藏
  • 容器内多个子元素，flex布局
  • 子元素在固定时间内移动固定距离

1.3 代码示例

<!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>
        li {
            list-style: none;
        }

        .swiper {
            width: 400px;
            height: 400px;
            display: flex;
            border: 1px solid #f98;
            margin: 10vh auto;
            padding-left: 0;
            overflow: hidden;
        }
        .swiper-switch-item{
            display: inline-block;
            width: 40px;
            height: 40px;
            background: rgba(0,0,0,0.3);
            font-size: 32px;
            color: yellow;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }

        .swiper-item-img {
            display: inline-block;
            width: 400px;
            height: 400px;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <ul class="swiper">
        <li class="swiper-item">
            <img class="swiper-item-img" src="./assets/冥想.jpg" alt="">
        </li>
        <li class="swiper-item">
            <img class="swiper-item-img" src="./assets/拍摄.jpeg" alt="">
        </li>
        <li class="swiper-item">
            <img class="swiper-item-img" src="./assets/骗你是小狗.jpeg" alt="">
        </li>
        <li class="swiper-item">
            <img class="swiper-item-img" src="./assets/earthPic.jpeg" alt="">
        </li>
        <li class="swiper-item">
            <img class="swiper-item-img" src="./assets/moon.jpeg" alt="">
        </li>
    </ul>

    <script>
        window.onload = initSwiper();
        let i = 1;
        var timer;
        // 启动轮播图
        function initSwiper() {
            timer = setInterval(() => {
                move();
                i++;
                if(i>4){
                    clearInterval(timer);
                }
            }, 2000)
        }
        // 图片移动方式
        function move() {
            const allSwiper = document.getElementsByClassName('swiper-item')
            const newArr = Array.from(allSwiper)
            newArr.forEach(element => {
                let moveDistance = i * 400
                console.log(moveDistance,"移动距离")
                element.style = `transform:translateX(-${moveDistance}px);transition:1s linear;`
            });
        }
    </script>
</body>

</html>

2.scrollLeft实现轮播图

2.1 实现效果

在这里插入图片描述

2.1 实现原理

  • 包含轮播内容的容器
  • 超出容器部分scroll滚动
  • 容器在固定时间内修改scroll值
  • 若想实现循环播放的效果，可以将包含轮播内容的容器复制双份，第二份只包含轮播的第一个内容即可
  • 若是弹幕类型，一页显示三个这种进行滚动，那么第二份就要至少包含一页内容的个数，1不是固定值，只是因为在该实例中，恰好一张图片就是一个页面内容
  • 当scroll距离超出第一个容器的scrollWidth时，令scroll值归0
  • 隐藏滚动条

2.3 代码示例

<!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>
        li {
            list-style: none;
        }
        .container{
            width: 400px;
            height: 400px;
            display: flex;
            border: 1px solid #f98;
            padding-left: 0;
            overflow: scroll;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE 10+ */

        }
        .container::-webkit-scrollbar {
                display: none; /* Chrome Safari */
        }

        .swiper{
            padding-left: 0;
            margin: 0;
            display: flex;
        }
        .swiper-switch-item{
            display: inline-block;
            width: 40px;
            height: 40px;
            background: rgba(0,0,0,0.3);
            font-size: 32px;
            color: yellow;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }

        .swiper-item-img {
            display: inline-block;
            width: 400px;
            height: 400px;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul class="swiper">
            <li class="swiper-item">
                <img class="swiper-item-img" src="./assets/冥想.jpg" alt="">
            </li>
            <li class="swiper-item">
                <img class="swiper-item-img" src="./assets/拍摄.jpeg" alt="">
            </li>
            <li class="swiper-item">
                <img class="swiper-item-img" src="./assets/骗你是小狗.jpeg" alt="">
            </li>
            <li class="swiper-item">
                <img class="swiper-item-img" src="./assets/earthPic.jpeg" alt="">
            </li>
            <li class="swiper-item">
                <img class="swiper-item-img" src="./assets/moon.jpeg" alt="">
            </li>
        </ul>
        <ul class="swiper">
            <li class="swiper-item">
                <img class="swiper-item-img" src="./assets/冥想.jpg" alt="">
            </li>
        </ul>
    </div>


    <script>
        window.onload = initSwiper();
        // 启动轮播图
        function initSwiper() {
            setInterval(() => {
                move();
            }, 10)
        }
        // 图片移动方式
        function move() {
            const container = document.getElementsByClassName('container')[0]
            const firstSwiper = document.getElementsByClassName('swiper')[0]
            if(container.scrollLeft === firstSwiper.scrollWidth){
                container.scrollLeft = 0
            }else{
                container.scrollLeft += 10;
            }
        }
    </script>
</body>

</html>

3.垂直弹幕

3.1 实现效果

  • 循环滚动十条固定数据，无缝衔接
    在这里插入图片描述

3.2 实现原理

  • 包含轮播内容的容器
  • 超出容器部分scroll滚动
  • 容器在固定时间内修改scroll值
  • 若想实现循环播放的效果，可以将包含轮播内容的容器复制双份，第二份只包含轮播的第一个内容即可
  • 若是弹幕类型，一页显示三个这种进行滚动，那么第二份就要至少包含一页内容的个数，1不是固定值，只是因为在该实例中，恰好一张图片就是一个页面内容
  • 当scroll距离超出第一个容器的scrollWidth时，令scroll值归0
  • 隐藏滚动条
  • 若想要从空白屏幕逐渐出现弹幕，可以在上面加一个block，定义显示内容的高度，再次scrollTop时，不想从空白开始，就从定义高度开始即可

3.3 代码示例

<template>
  <div class="tbtcContainer">
    <div class="tbtcContainer-scroll">
      <div class="tbtcContainer-scroll-positionBlock"/>
      <ul class="tbtcContainer-scroll-list">
        <BulletScreenItem
          v-for="(item,index) in bulletScreenData"
          :key="index"
          :name="item.name"
          :courses-name="item.coursesName"
        />
      </ul>
      <ul class="tbtcContainer-scroll-list">
        <BulletScreenItem
          v-for="(item,index) in bulletScreenData.slice(0,4)"
          :key="index"
          :name="item.name"
          :courses-name="item.coursesName"
        />
      </ul>
    </div>
    <div class="tbtcContainer-overlay"></div>
  </div>
</template>
<style scoped lang="less">
.tbtcContainer {
  position: absolute;
  left: 16px;
  top: 230px;

  &-scroll {
    height: 136px;
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &-positionBlock {
      height: 136px;
    }

  }

  &-scroll::-webkit-scrollbar {
    display: none;
  }

  &-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 136px;
  }
}
</style>
<script>
import BulletScreenItem from "@/components/common/BulletScreen/BulletScreenItem";

export default {
  components: {
    BulletScreenItem,
  },
  data() {
    return {
      btocInterval: null,
    }
  },
  props: {
    bulletScreenData: {
      type: Array
    }
  },
  methods: {
    // 开启动画效果
    initBtocInterval() {
      // 获取滚动容器
      const container = document.getElementsByClassName('tbtcContainer-scroll')[0];
      // 获取总计高度,可以计算，或者在上面增加相应的高度，用于替换下面的315
      const firstChild = document.getElementsByClassName('tbtcContainer-scroll-list')[0];
      this.btocInterval = setInterval(() => {
        if (container.scrollTop === firstChild.scrollHeight + 20 + 25 + 20 + 25 + 20 + 25 + 20) {
          console.log(container.scrollTop)
          console.log(firstChild.scrollHeight)
          container.scrollTop = 136;
        } else {
          container.scrollTop++;
        }
      }, 10)
    },
  },
  mounted() {
    this.initBtocInterval();
  }
}
</script>

4.水平弹幕

4.1 实现效果

在这里插入图片描述

4.2 实现原理

原理同垂直方向，只不过属性不同

4.3 代码示例

<template>
  <div class="trtlContainer">
    <div class="trtlContainer-first">
      <div  class="trtlContainer-first-block">1</div>
      <ul class="trtlContainer-first-list">
        <BulletScreenItem
          v-for="(item,index) in bulletScreenData"
          :key="index"
          :name="item.name"
          :courses-name="item.coursesName"
        />
      </ul>
      <ul class="trtlContainer-first-list">
        <BulletScreenItem
          v-for="(item,index) in bulletScreenData"
          :key="index"
          :name="item.name"
          :courses-name="item.coursesName"
        />
      </ul>
    </div>
    <div class="trtlContainer-second">
      <div class="trtlContainer-second-block">2</div>
      <ul class="trtlContainer-second-list">
        <BulletScreenItem
          v-for="(item,index) in reverseBulletScreenData"
          :key="index"
          :name="item.name"
          :courses-name="item.coursesName"
        />
      </ul>
      <ul class="trtlContainer-second-list">
        <BulletScreenItem
          v-for="(item,index) in reverseBulletScreenData"
          :key="index"
          :name="item.name"
          :courses-name="item.coursesName"
        />
      </ul>
    </div>
    <div class="trtlContainer-overlay"/>
  </div>
</template>
<style scoped lang="less">

.trtlContainer {
  position: absolute;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  top: 0;

  & ::-webkit-scrollbar {
    display: none;
  }

  &-first {
    display: flex;
    width: 100%;
    overflow: scroll;
    flex-wrap: nowrap;
    white-space: nowrap;

    &-block{
      width: 1080px;
      flex-shrink: 0;
    }


    &-list {
      display: flex;
      flex-shrink: 0;

      & /deep/ .bulletScreenItem {
        margin: 8px 60px;
      }
    }
  }

  &-second {
    display: flex;
    width: 100%;
    overflow: scroll;
    flex-wrap: nowrap;
    white-space: nowrap;

    &-block{
      width: 1080px;
      flex-shrink: 0;
    }


    &-list {
      display: flex;
      flex-shrink: 0;

      & /deep/ .bulletScreenItem {
        margin: 8px 50px;
      }

      & /deep/ .bulletScreenItem:first-child {
        margin-left: 16px;
      }
    }
  }

  &-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 80px;
  }

}
</style>
<script>
import BulletScreenItem from "@/components/common/BulletScreen/BulletScreenItem";

export default {
  components: {
    BulletScreenItem,
  },
  data() {
    return {
      rtlTopInterval: null,
      rtlBotInterval: null,
      bulletScreenData: [],
      reverseBulletScreenData: [],
    }
  },
  methods: {
    // 获取轮播数据
    async getBulletData() {
      const {data} = await this.$get('customers/latest', {
        count: 10
      })
      this.bulletScreenData = data;
      this.reverseBulletScreenData = data.slice().reverse();

      if (this.bulletScreenData.length) {
        await this.initRtLIntervalTop();
        await this.initRtLIntervalBot();
      }
    },
    // 轮播右至左上部分
    async initRtLIntervalTop() {
      // 第一个滑动容器
      const firstContainer = document.getElementsByClassName('trtlContainer-first')[0];
      // 第一个滑动容器中的第一个ul,下面的1080 与该值联动上
      const firstContainerChild = document.getElementsByClassName('trtlContainer-first-list')[0];
      this.rtlTopInterval = setInterval(() => {
        if (firstContainer.scrollLeft === firstContainerChild.scrollWidth + 1080) {
          firstContainer.scrollLeft = 1080;
        } else {
          firstContainer.scrollLeft++;
        }
      }, 4)
    },
    // 轮播右至左下部分
    async initRtLIntervalBot() {
      // 第二个滑动容器
      const secondContainer = document.getElementsByClassName('trtlContainer-second')[0];
      // 第二个滑动容器中的第一个ul
      const secondContainerChild = document.getElementsByClassName('trtlContainer-second-list')[0];
      this.rtlBotInterval = setInterval(() => {
        if (secondContainer.scrollLeft === secondContainerChild.scrollWidth + 1080) {
          secondContainer.scrollLeft = 1080;
        } else {
          secondContainer.scrollLeft++;
        }
      }, 2)
    }
  },
  beforeDestroy() {
    window.clearInterval(this.rtlTopInterval);
    window.clearInterval(this.rtlBotInterval);
  },
  mounted() {
    this.getBulletData();
  }
}
</script>

5.效果优化requestAnimationFrame

当我们在使用scrollTop、scrollLeft方式配合setInterval处理动画时，发现当窗口切换一段时间时回来会有很多内容卡顿在同一位置或看起来有抖动的情况，此时我们可以通过使用window.requestAnimationFrame方式来设置动画，避免这个问题

    animationEffect() {
      // 获取滚动容器
      const container = document.getElementsByClassName('tbtcContainer-scroll')[0];
      // 获取总计高度
      const firstChild = document.getElementsByClassName('tbtcContainer-scroll-list')[0];
      // 155 = 20 + 25 + 20 + 25 + 20 + 25 + 20
      if (container.scrollTop === firstChild.scrollHeight + 155) {
        container.scrollTop = 136;
        window.requestAnimationFrame(this.animationEffect);
      } else {
        // container.scrollTop++;
        container.scrollTop = container.scrollTop+1;
        window.requestAnimationFrame(this.animationEffect);
      }
    },
    // 开启动画效果，调用window.requestAnimationFrame，传入一个callback函数
    initBtocInterval() {
      window.requestAnimationFrame(this.animationEffect);
    },
  • 我们发现无论是initBtocInterval方法还是animationEffect里面都调用了window.requestAnimationFrame,若不在animationEffect中调用，则动画只会执行一次，只有在回调函数中调用，才能源源不断的执行。

这是我在解决问题时看到有关讲解window.requestAnimationFrame的文章，觉得特别好，分享给你

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~

fighting Ably!
关注
  • 1
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Html——表白弹幕 特效（效果 + 代码）.rar
02-07
这是一个由前端技术实现的HTML前端——表白特效，可以直接运行，包含全部源代码，同时也带背景音乐，可以在运行时自行播放，欢迎大家下载！
JS&CSS实现轮播图效果
qq_57215961的博客
05-17 1576
轮播图有两种效果，一种是 改变图片的背景图，与京东首页轮播图效果类似；另一种是 利用定位改变图片的左偏移量，实现滑动效果，与淘宝首页轮播图效果类似。 CSS实现 css实现轮播图的效果不全面，只能实现图片的切换，点击指示点或下一张等指示箭头的操作需要在js中实现，但css实现轮播图的优势在于使用动画，逻辑简单 背景图切换轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
HTML+CSS +JS实现轮播图的四种方法
热门推荐
偷只猫来养的博客
06-18 3万+
HTML+CSS +JS实现轮播图 轮播图能够自动播放，当点击左右箭头时可以手动切换图片；当鼠标移入圆点时，自动播放停止，显示当前图片；当鼠标移出圆点时，图片又从当前图片开始自动播放；当鼠标点击圆点时，可以手动切换图片；图片的播放是循环的。 1、布局——HTML + CSS 首先，在页面放一个整体的大盒子，在大盒子中装几个小盒子，分别用于放图片、左右点击箭头、底部切换的圆点。 <div id="box"> <!-- 放图片--> <div id="lunboimg"&
CSS3 实现弹幕的示例代码
01-19
最近需要项目需要实现弹幕，网上参考了各种方法，最后觉得transform+transition实现的效果在移动设备上性能最好，在iphone6和红米4上测试，看不到卡顿的感觉。用jquery的animate动画在移动设备上有明显的卡顿。 1.首先创建弹幕区域 <div class=barrage> <div class=mask> <!--//弹幕内容--> </div> </div> <input type=text ng-model=data.comment/> <button ng-click=addDanmu()>说两句</button > 2.css .we
用JS+CSS打造你自己的弹幕王国，让网页动起来！
weixin_62650212的博客
03-21 4568
😎用JS+CSS打造你自己的弹幕王国，让网页动起来！弹幕大法，让你的网页像视频一样有趣！如何用JS+CSS实现弹幕效果？看完这篇博客，你就会了！JS+CSS + 弹幕 = 网页新体验！教你如何用简单的代码实现弹幕功能！你还不会用JS+CSS做弹幕？快来学习这个超酷的网页技巧吧！你想用js和css实现弹幕效果吗？弹幕效果是指在视频或图片上显示滚动的文字或图形，通常用于表达观众的评论或反馈。这就是使用JS+CSS方法实现弹幕效果的简单示例网页。
HTML+CSS+JavaScript制作弹幕效果
qq_44715376的博客
05-29 2522
全屏弹幕，盒子弹幕，视频弹幕
拿来即用，html+css+js原生实现简易的弹幕效果
Su__py的博客
06-24 1802
闲来无事，做了一个弹幕效果，话不多说，直接上代码，拿来即用。 下面是html代码： 下面是css代码： 下面是js的带按摩 效果图是这样的： 感谢收看，欢迎指导，还是小白，代码写得不好，还请见谅。......
基于Javascript+css+html的网易-云实现的点歌机器人源码+文档说明
最新发布
01-22
使用websocket，支持多人同时点歌，发送弹幕聊天 具有搜索suggestion，用户体验更佳 点击mv视频右上角可以缩小放大，不影响用户其他操作 具有mv的资源，优先播放mv 对于未播放的已点歌曲，可以进行取消 - 不懂运行，...
网页设计期末大作业新闻网站（html+css+js）
05-27
网页设计期末大作业新闻网站(免积分下载...网页设计期末大作业新闻网站(免积分下载）含轮播图，导航栏，可以发弹幕，自动弹幕等等网页设计期末大作业新闻网站(免积分下载）含轮播图，导航栏，可以发弹幕，自动弹幕等等
html+css+jquery弹幕例子
06-20
html css jquery 弹幕
CSS3实现弹幕
06-13
CSS3实现弹幕
本插件是一个弹幕发生器利用HTML5canvasES6来实现普通弹幕和高级弹幕发送
08-12
本插件是一个弹幕发生器，利用HTML5 canvas ES6来实现普通弹幕和高级弹幕发送
rc-bullets::rainbow:基于CSS3 Animation，使用React构建的弹幕组件
05-31
React 弹幕 :rainbow: 基于 CSS3 Animation，使用 React 构建，可扩展，高性能。 演示地址 :backhand_index_pointing_right: 安装 npm: npm install --save rc-bullets yarn: yarn add rc-bullets 初始化一个简单的...
JS带文本框文字弹幕特效.zip
10-05
JS带文本框文字弹幕特效.zip
前端、vue、Vue3弹幕实现；前端CSS实现弹幕
lys20000913的博客
11-22 2764
前端实现弹幕；前端基于css3实现弹幕；Vue3实现弹幕；弹幕堆叠处理；弹幕堆叠解决方案；弹幕配置弹道数量 弹道信息 文本大小 弹幕 插入 图片 emoji等
使用css绘制弹幕,实现弹幕效果的方法总结（css和canvas）
weixin_39583751的博客
08-03 3390
这篇文章主要介绍了关于实现弹幕效果的方法总结(css和canvas) ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下之前在一个移动端的抽奖页面中，在抽奖结果的展示窗口需要弹幕轮播显示，之前踩过一些小坑，现在总结一下前端弹幕效果的实现方式。css3实现乞丐版的弹幕css3弹幕性能优化canvas实现弹幕canva弹幕的扩展功1. css3实现乞丐版的弹幕(1)如何通过css3实现弹幕...
使用CSS简单实现弹幕功能
weixin_46776617的博客
12-25 1388
使用CSS简单实现弹幕功能
2022-12-09 工作记录--React/JS-用swiper实现多行交错、同速、跑马灯效果的弹幕式轮播（总）+ 将一个含未知个数内容的数组，划分成num份
weixin_48850734的博客
12-09 1569
React/JS-用swiper实现多行交错、同速、跑马灯效果的弹幕式轮播（总）+ 将一个含未知个数内容的数组，划分成num份
JS可循环弹幕示例
qingyuexiao的专栏
09-14 1117
朋友有项目需要做弹幕效果，网上找了示例代码，运行起来有点问题（文字重叠+没有循环），让我看下。由于我比较不喜欢跟着别人思路走，因此干脆重新写了一个，基本实现弹幕功能，支持PC和移动端。具体功能如下： 支持指定弹幕行数 支持循环播放 支持弹幕开关 支持设置评论颜色（通过CSS支持，可改造成直接设置字体颜色） 支持设置弹幕透明度 效果如下： 完整代码见：https://github.com/qingyuexiao/SimpleBarrage ...
CSS+Javascrip实现弹幕的效果
03-28
CSS和JavaScript都可以实现弹幕效果，下面是其中一种实现方式： CSS实现： 1. 定义一个弹幕容器，设置宽度和高度，并设置overflow为hidden，保证弹幕在容器内滚动。 ```css .barrage-container { position: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值