原生js实现淡入淡出轮播图效果

最新推荐文章于 2023-05-27 17:05:06 发布

程序媛夏天

最新推荐文章于 2023-05-27 17:05:06 发布

阅读量328

点赞数

分类专栏： JavaScript进阶

本文链接：https://blog.csdn.net/weixin_45822171/article/details/118409526

版权

轮播图 js实现轮播图

JavaScript进阶专栏收录该内容

63 篇文章 37 订阅

订阅专栏

下面为原生js写出来的轮播图淡入淡出效果，源代码能够正确运行。
1.效果展示
在这里插入图片描述

2.源代码

swiper.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图</title>
  <link rel="stylesheet" href="./style/style.css">
  <script src="./script/jquery.min.js"></script>
</head>
<body>
  <div class="swiper">
  <--- 图片轮播容器->
    <div class="swiper-wrap">
      <img class="active" src="./images/1.jpg" alt="">
      <img class="" src="./images/2.jpg" alt="">
      <img class="" src="./images/3.jpg" alt="">
      <img class="" src="./images/4.jpg" alt="">
      <img class="" src="./images/5.jpg" alt="">
    </div>
  <--- 左右点击箭头->
    <div class="slider_control prev">&lt;</div>
    <div class="slider_control next">&gt;</div>
 <--- 图片轮播容器->
    <div class="dynamic">
      <span class="active"></span>
      <span class=""></span>
      <span class=""></span>
      <span class=""></span>
      <span class=""></span>
    </div>
  </div>
</body>
</html>

swiper.js

<script>
const len = $(".swiper-wrap").children("img").length;

// 当前图片索引
let current = 0,
  timer = null;

// 下一张图片
$(".next").click(function () {
  ++current;
  // 如果索引 等于 图片数组长度则等于 0
  if (current === len) current = 0;
  // 轮播图渲染图片
  renderImg();
});

// 上一张图片
$(".prev").click(function () {
  --current;
  // 如果索引 小于 0 则等于 图片数组长度 - 1
  if (current < 0) current = len - 1;
  // 轮播图渲染图片
  renderImg();
});

// 轮播图渲染图片
function renderImg() {
  $(".swiper-wrap img")
    .eq(current)
    .addClass("active")
    .siblings("img")
    .removeClass("active");
  $(".dynamic span")
    .eq(current)
    .addClass("active")
    .siblings("span")
    .removeClass("active");
}

// 小圆点点击切换图片
$(".dynamic span").each(function (index, item) {
  $(this).mousemove(function () {
    current = index;
    renderImg();
  });
});


// 定时器 切换轮播图
function animateBanner() {
  timer = setInterval(() => {
    ++current;
    // 如果索引 等于 图片数组长度则等于 0
    if (current === len) current = 0;

    // 轮播图渲染图片
    renderImg();
  }, 1500);
}

// 鼠标经过轮播图
$('.swiper').mousemove(function() { clearInterval(timer)})
// 鼠标移出轮播图
$('.swiper').mouseout(animateBanner)

animateBanner();

</script>

swiper.css

.swiper {
  width: 770px;
  height: 505px;
  margin: 0 auto;
  position: relative;
}

.swiper-wrap {
  width: 100%;
  height: 100%;
}
.swiper-wrap img {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  transition: all .5s;
  cursor: pointer;
  width: 770px;
  height: 505px;
}

.swiper-wrap img.active {
  opacity: 1;
}

.slider_control {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #5251518f;
  cursor: pointer;
  opacity: .5;
  font-weight: bold;
  user-select: none;
}

.swiper:hover .slider_control {
  opacity: 1;
}

.slider_control.prev {
  left: 0;
}

.slider_control.next {
  right: 0;
}

.dynamic {
  position: absolute;
  bottom: 20px;    
  left: 50px;
  text-align: center;
}

.dynamic span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow:  0 0 10px rgba(0, 0, 0, .3);
  cursor: pointer;
  user-select: none;
}

.dynamic span.active {
  background: #69aae7;
}

3.总结：
轮播图还有左右无缝轮播等多种效果，大家可以尝试下。

程序媛夏天

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生js实现淡入淡出轮播图效果

下面为原生js写出来的轮播图淡入淡出效果，源代码能够正确运行。1.效果展示2.源代码swiper.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title&g
复制链接

扫一扫