三郎前端特效学习源代码:图片主页轮播组件

三郎前端特效学习源代码:图片主页轮播组件

简单介绍

各大网站都比较常用的主页轮播组件
可以自己改改就能用

效果图

三郎前端特效学习源代码:图片主页轮播组件

三郎前端特效学习源代码:图片主页轮播组件

三郎前端特效学习源代码:图片主页轮播组件

源代码

html部分


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- 引入font-awesome css,控制按钮用到了 -->
    <link
      rel="stylesheet"
      href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css"
    />
    <!-- 引入页面CSS -->
    <link rel="stylesheet" href="style.css" />
    <title>图片轮播组件</title>
  </head>
  <body>
    <header>
      <!-- 轮播组件 -->
      <div class="image-slider">
        <!-- 第一张幻灯片 -->
        <div class="slide current">
          <!-- 图片 -->
          <img
            class="image"
            src="https://images.pexels.com/photos/1434580/pexels-photo-1434580.jpeg?cs=srgb&dl=high-rise-buildings-1434580.jpg&fm=jpg"
            alt="北京"
          />
          <!-- 描述 -->
          <div class="content">
            <h1 class="title">北京</h1>
            <p class="description">
              北京市,简称“京”,是*首都、也是中国4个直辖市之一;北京是国家中心城市、超大城市,全国政治中心、文化中心、国际交往中心、科技创新中心,是世界著名古都和现代化国际城市,也是中国**委员会、**人民*和全国人民代表大会常务委员会的办公所在地。
            </p>
          </div>
        </div>
        <!-- 第一张幻灯片 -->
        <div class="slide">
          <!-- 图片 -->
          <img
            class="image"
            src="https://images.pexels.com/photos/2614818/pexels-photo-2614818.jpeg?cs=srgb&dl=illuminated-tower-2614818.jpg&fm=jpg"
            alt="东京"
          />
          <!-- 描述 -->
          <div class="content">
            <h1 class="title">东京</h1>
            <p class="description">
              东京(とうきょう、Tōkyō),日本首都,位于日本关东平原中部,是面向东京湾的国际大都市,日本三大都市圈之一东京都市圈的中心城市。“东京”狭义上指东京都、旧东京府或东京都区部(旧东京市),亦可泛指东京都市圈
              。东京是江户幕府的所在地,江户在庆应4年7月(1868年9月)改名为东京。
            </p>
          </div>
        </div>
        <!-- 第一张幻灯片 -->
        <div class="slide">
          <!-- 图片 -->
          <img
            class="image"
            src="https://images.pexels.com/photos/597909/pexels-photo-597909.jpeg?cs=srgb&dl=buildings-city-city-view-cityscape-597909.jpg&fm=jpg"
            alt="纽约"
          />
          <!-- 描述 -->
          <div class="content">
            <h1 class="title">纽约</h1>
            <p class="description">
              纽约市(New York
              City,简称NYC),位于美国纽约州东南部大西洋沿岸,是美国第一大城市及第一大港口,纽约都市圈为世界上最大的城市圈之一,与英国伦敦、中国香港并称为“纽伦港”(Nylonkong)。纽约与伦敦并列为全世界最*的国际大都市。2018年11月,纽约被GaWC评为Alpha++级世界一线城市。
            </p>
          </div>
        </div>
        <!-- 控制按钮 -->
        <div id="prev"><i class="fas fa-chevron-left"></i></div>
        <div id="next"><i class="fas fa-chevron-right"></i></div>
      </div>
    </header>
    <!-- 引入JS -->
    <script src="index.js" type="text/javascript"></script>
  </body>
</html>

js部分

//后退按钮
const prev = document.querySelector("#prev");
//前进按钮
const next = document.querySelector("#next");

// 所有幻灯片
const slides = document.querySelectorAll(".slide");

// 当前正在播放的幻灯片
var currentIndex = 0;

// 是否自动播放
var autoPlay = true;

// 播放方向,前进或后退
var forward = false;

// 自动播放间隔,5秒
var interval = 5000;

// 添加前进按钮事件处理函数
next.addEventListener("click", handleNextClicked);

// 添加后退按钮事件处理函数
prev.addEventListener("click", handlePrevClicked);

// 是否自动播放
if (autoPlay) {
  setInterval(forward ? handleNextClicked : handlePrevClicked, interval);
}

function handleNextClicked() {
  //当前幻灯片
  let current = slides[currentIndex];
  // 去掉当前幻灯片的current属性
  current.classList.remove("current");

  //移动到下一张幻灯片,如果没有,则从第一张开始
  currentIndex++;
  if (currentIndex >= slides.length) {
    currentIndex = 0;
  }
  // 给下一张幻灯片加上current class
  slides[currentIndex].classList.add("current");
}

function handlePrevClicked() {
  //当前幻灯片
  let current = slides[currentIndex];
  // 去掉当前幻灯片的current属性
  current.classList.remove("current");

  //移动到上一张幻灯片,如果没有,则从最后一张开始
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = slides.length - 1;
  }
  // 给下一张幻灯片加上current class
  slides[currentIndex].classList.add("current");
}

css部分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
}

/* 设置轮播组件占满整个屏幕 */
.image-slider {
  width: 100vw;
  height: 100vh;
}

/* 设置每个幻灯片占满父容器 */
.image-slider .slide {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all linear 0.8s;
  overflow: hidden;
}

/* 设置图片样式 */
.image-slider .image {
  /* 设置图片大小 */
  width: 100%;
  height: 100%;
  /* 图片自适应,保持比例占满屏幕 */
  object-fit: cover;
  /* 绝对布局,z-index 50放到文字下方 */
  position: absolute;
  z-index: 50;
}

/* 设置文本样式 */
.image-slider .slide .content {
  position: absolute;
  /* 放在图片上方 */
  z-index: 100;
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 48px;
  bottom: 0;
  width: 50%;
}

/* 标题距下方24px */
.image-slider .slide .content h1 {
  margin-bottom: 24px;
}

/* 控制按钮 */
#prev,
#next {
  position: absolute;
  z-index: 150;
  width: 80px;
  height: 80px;
  font-size: 48px;
  color: white;
  /* 居中 */
  text-align: center;
  line-height: 80px;

  /* 圆角 */
  border-radius: 50%;
  /* 背景 */
  background-color: rgba(0, 0, 0, 0.6);

  /* 在组件中的位置 */
  top: calc(50% - 24px);
  left: 50px;
  transition: all 0.2s;
  cursor: pointer;
}

/* 下一张按钮的位置,靠右 */
#next {
  left: unset;
  right: 50px;
}

/* 鼠标移到按钮上时改变背景和字体颜色 */
#prev:hover,
#next:hover {
  background-color: rgba(255, 255, 255, 0.6);
  color: black;
}

/* 隐藏其他幻灯片 */
.image-slider .slide {
  opacity: 0;
}

/* 设置当前正在播放的幻灯片的透明度为1 */
.image-slider .slide.current {
  opacity: 1;
}

/* 图片文字描述动画属性,向下移动500px */
.image-slider .slide .content {
  opacity: 0;
  transform: translateY(500px);
}

/* 当前正在播放的幻灯片的文字描述位置移动到原位 */
.image-slider .slide.current .content {
  opacity: 1;
  transform: translateY(0);
  transition: all 1s ease-in-out 0.4s;
}

/* 适配屏幕 */
@media screen and (max-width: 960px) {
  /* 文字占满屏幕 */
  .image-slider .slide .content {
    width: 100%;
  }

  /* 控制按钮大小和间距缩小 */
  #prev,
  #next {
    font-size: 24px;
    left: 24px;
    width: 48px;
    height: 48px;
    line-height: 48px;
    top: 40%;
  }

  /* 移动下一张按钮,使间距变小 */
  #next {
    left: unset;
    right: 24px;
  }
}
上一篇:Postman参数传递,断言和设置变量


下一篇:【TWVRP】基于matlab灰狼算法求解带时间窗的路径规划问题【含Matlab源码 1075期】