文字上下滚动轮播

<template>
  <div class="text-container">
    <transition class="" name="slide" mode="out-in">
      <p class="text" :key="text.id">{{ text }}</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "TextScroll",
  data() {
    return {
      count: 0, // 当前索引
      limit: 2,
      dataList: [
        {
          id: "0",
          val: "1111111",
        },
        {
          id: "1",
          val: "2222222",
        },
        {
          id: "2",
          val: "3333333",
        },
        {
          id: "3",
          val: "4444444",
        },
      ],
      intervalId: null, // 定时器ID
      playTime: 2000, // 定时器执行间隔
    };
  },
  computed: {
    text() {
      return this.dataList
        .slice(this.count, this.count + this.limit )
        .reduce((acc, item) => acc + item.val, "");
    },
  },
  created() {
    this.intervalId = setInterval(() => {
      // 定义定时器
      this.getText();
    }, this.playTime);
  },
  methods: {
    getText() {
      let len = this.dataList.length
      if (len === 0) {
        return; // 当数组为空时,直接返回
      }

      if (this.count >= len - 1) {
        // 当前为最后一个时
        this.count = 0; // 从第一个开始
      } else {
        this.count += this.limit;
      }
    },
  },
  destroyed() {
    clearInterval(this.intervalId); // 清除定时器
  },
};
</script>

<style lang="scss" scoped>
.text-container {
  border: 1px solid red;
  font-size: 14px;
  color: #f56b6b;
  margin-right: 20px;
  height: 60px;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 1s;
}

.slide-enter {
  transform: translateY(40px);
}

.slide-leave-to {
  transform: translateY(-40px);
}
</style>
以下是一个基于 jQuery 的文字上下循环轮播的示例代码: ```html <div id="slider"> <ul> <li>Lorem ipsum dolor sit amet.</li> <li>Consectetur adipiscing elit.</li> <li>Nulla nec elit non turpis.</li> <li>Donec euismod turpis sed dolor.</li> <li>Curabitur ultricies felis quis urna.</li> </ul> </div> ``` ```css #slider { height: 100px; overflow: hidden; } #slider ul { list-style: none; margin: 0; padding: 0; position: relative; } #slider ul li { position: absolute; top: 0; left: 0; display: none; } #slider ul li:first-child { display: block; } ``` ```javascript $(document).ready(function() { setInterval(function() { var firstItem = $('#slider ul li:first-child'); var height = firstItem.height(); firstItem.animate({marginTop: -height + 'px'}, 1000, function() { firstItem.detach().removeAttr('style').appendTo('#slider ul'); }); }, 3000); }); ``` 首先将要轮播文字放入一个 `<ul>` 列表中,每个文字对应一个 `<li>` 元素。外层包裹一个固定高度并设置 `overflow: hidden` 的 `<div>` 元素作为容器。 CSS 部分将 `<ul>` 元素设为相对定位,每个 `<li>` 元素设为绝对定位并隐藏。第一个 `<li>` 元素设为显示状态。 JavaScript 部分使用 `setInterval` 函数定时执行轮播操作。首先获取第一个 `<li>` 元素,计算其高度,然后使用 `animate` 函数将其向上移动一个自身高度的距离。移动完成后,将该元素从父元素中移除并添加到列表的末尾,以此实现循环轮播效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值