vue新闻公告效果

image.png

• 新闻公告，动态切换展示

 <div class="xinwen">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div v-for="item in list" class="swiper-slide">
            <img :src="item.imageUrl" />
          </div>
        </div>
      </div>
      <div class="paginationbox"></div>
      <div class="pagination" @swiper="onSlideChangeStart">
      </div>
      <ul class="caption">
        <li :class="{ active: sign == '1' }">
          中国之美|你的笑脸如期到来，这正是成长的意义
        </li>
        <li :class="{ active: sign == '2' }">国家相册：迎新的日子</li>
        <li :class="{ active: sign == '3' }">习近平的2016（拾贰月）</li>
        <li :class="{ active: sign == '4' }">雕刻家</li>
        <li :class="{ active: sign == '5' }">
          中国之美|你的笑脸如期到来，这正是成长的意义
        </li>
        <li :class="{ active: sign == '6' }">美丽的夜色</li>
      </ul>
    </div>

 sign: "1",
 list: [
        {
          imageUrl: require("@/assets/images/zsk-banner.png"),
        },
        {
          imageUrl: require("@/assets/images/tsc-banner.png"),
        },
        {
          imageUrl: require("@/assets/images/znt-banner.png"),
        },
      ],

  mounted() {
    let mySwiper = new Swiper(".swiper-container", {
      // speed: 100,
      loop: true,
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      // speed:500,
      spaceBetween: 30,
      effect: "fade",
      // touchRatio: 10,
      pagination: {
        el: ".pagination",
        clickable: true, // 可点击
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (index + 1) + "</span>";
        },
      },
    });
    let that = this;
    mySwiper.on("paginationUpdate", function () {
      that.sign = mySwiper.realIndex + 1;
      // 在这里执行你的代码
    });
    mySwiper.el.onmouseover = function () {
      mySwiper.autoplay.stop();
    };
    mySwiper.el.onmouseleave = function () {
      mySwiper.autoplay.start();
    };
  },
 onSlideChangeStart(swiper) {
      swiper.pagination.on("update", () => {
        const activeIndex = swiper.activeIndex; // 获取当前激活的slide索引
        const slidesLength = swiper.slides.length; // 获取总的slide数量
      });
    },

.xinwen {
  background: #222;
  margin: 0 auto;
  width: 655px;
  height: 441px;
  position: relative;
}

.swiper-container {
  width: 655px;
  height: 441px;
}
.paginationbox {
  width: 100%;
  background: #ececec;
  z-index: 19;
  height: 50px;
  position: absolute;
  bottom: 0px;
  opacity: 0.7;
}
.caption {
  position: absolute;
  bottom: 0px;
  line-height: 34px;
  width: 80%;
  overflow: hidden;
  height: 50px;
  z-index: 20;
  color: #222;
}
.pagination {
  position: absolute;
  right: 0;
  width: 20%;
  z-index: 20;
  bottom: 10px;
  text-align: center;
}

.caption li {
  padding-left: 30px;
  width: 100%;
  position: absolute;
  bottom: -50px;
  transition: all 0.5s cubic-bezier(0.33, 0, 0.2, 1);
}

.caption .active {
  bottom: 8px;
}

.caption li a {
  color: #fff;
  font-size: 16px;
  font-family: microsoft yahei;
  text-decoration: none;
}