js淡入淡出焦点图幻灯片效果代码分享

请允许我详细讲解一下如何实现JavaScript淡入淡出焦点图幻灯片效果。

准备工作

首先,我们需要准备好HTML、CSS和JavaScript文件,并通过HTML文件引入JavaScript文件。此外,我们还需要在HTML中添加包含幻灯片图片的容器元素。

示例代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JavaScript淡入淡出焦点图幻灯片</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="slider-wrapper">
      <img src="slide1.jpg" alt="Slide 1" class="slide">
      <img src="slide2.jpg" alt="Slide 2" class="slide">
      <img src="slide3.jpg" alt="Slide 3" class="slide">
    </div>
    <script src="script.js"></script>
  </body>
</html>

编写CSS样式

接下来,我们需要使用CSS来为幻灯片容器和幻灯片图片添加样式。在这个示例中,我们将容器设置为一个相对定位的元素,并将图片设置为绝对定位。我们还将隐藏除第一张图片以外的所有图片,并使用z-index属性来控制图片之间的层级关系。

示例代码:

.slider-wrapper {
  position: relative;
  width: 800px;
  height: 600px;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
}

.slide:first-child {
  opacity: 1;
  z-index: 2;
}

编写JavaScript代码

最后,我们需要编写JavaScript代码来实现幻灯片效果。我们将使用一个自动播放、循环播放的定时器。每次定时器触发时,当前显示的图片将淡出,下一张图片将淡入。我们还将添加鼠标悬停停止播放的功能。

示例代码:

// 获取幻灯片容器元素和所有幻灯片图片元素
const sliderWrapper = document.querySelector('.slider-wrapper');
const slides = document.querySelectorAll('.slide');

// 设置图片索引变量和定时器变量
let slideIndex = 0;
let timer = null;

// 定义函数实现淡入效果
function fadeIn(element) {
  let op = 0.1;
  element.style.opacity = 0;
  element.style.display = 'block';
  function fade() {
    if (op >= 1) {
      clearInterval(fading);
    }
    element.style.opacity = op;
    op += op * 0.1;
  }
  let fading = setInterval(fade, 50);
}

// 定义函数实现淡出效果
function fadeOut(element) {
  let op = 1;
  function fade() {
    if (op <= 0.1) {
      clearInterval(fading);
      element.style.display = 'none';
    }
    element.style.opacity = op;
    op -= op * 0.1;
  }
  let fading = setInterval(fade, 50);
}

// 定义函数实现幻灯片循环播放
function playSlides() {
  // 隐藏当前显示的图片
  fadeOut(slides[slideIndex]);
  // 将图片索引加1
  slideIndex = (slideIndex + 1) % slides.length;
  // 显示下一张图片
  fadeIn(slides[slideIndex]);
}

// 开始自动播放
timer = setInterval(playSlides, 3000);

// 添加鼠标悬停停止播放功能
sliderWrapper.addEventListener('mouseover', function() {
  clearInterval(timer);
});

sliderWrapper.addEventListener('mouseout', function() {
  timer = setInterval(playSlides, 3000);
});

结束语

至此,完整的JavaScript淡入淡出焦点图幻灯片效果已经实现。我们可以根据需要更改HTML、CSS和JavaScript代码中的细节以获得更多的自定义效果,如添加幻灯片切换动画、改变播放间隔等。

示例效果1:https://codepen.io/pen/?template=GRjYKxG

示例效果2:https://codepen.io/pen/?template=wvVoKXm

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js淡入淡出焦点图幻灯片效果代码分享 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JavaScript实现手写循环滑动效果

    下面是一份JavaScript实现手写循环滑动效果的完整攻略: 1. 确定需求和目标 在开始编写代码之前,我们需要首先明确需求和目标。对于这个循环滑动效果,需求和目标如下: 实现一个轮播图,图片从左往右进行循环滑动; 点击向左/向右的箭头按钮,可以实现图片的向左/向右滑动; 当鼠标悬浮在图片上时,停止自动轮播,鼠标移开后恢复自动轮播。 2. 实现自动轮播效果…

    css 2023年6月11日
    00
  • 如何利用vue实现css过渡和动画

    利用Vue实现CSS过渡和动画是一个常见的需求。以下是实现过程的完整攻略: 1. 使用Vue的过渡类 Vue提供了一组CSS类来实现过渡效果。这些类可以在元素的进入、离开或状态改变时自动添加和移除。具体来说,这些类有以下几个: v-enter: 进入过渡的开始状态。 v-enter-active: 进入过渡的激活状态,一般用来定义过渡效果。 v-enter-…

    css 2023年6月10日
    00
  • CSS隐藏文字的6种方法

    以下是详细讲解“CSS隐藏文字的6种方法”的完整攻略: 1. 使用font-size:0 这是一种最简单却也最常用的方法。将元素的字体大小设为0,即可实现隐藏文字的效果。 .hide-text { font-size: 0; } 2. 使用text-indent 通过设置文本缩进,将文字缩进到盒子的左侧或者右侧,实现隐藏文字的效果。 .hide-text {…

    css 2023年6月9日
    00
  • CSS圆形旋转效果 纯CSS制作圆形旋转菜单效果(七步完成)

    下面是详细解释该攻略的每一步骤: 1. 创建HTML结构 将需要的菜单项通过<ul>和<li>标签创建出来,代码示例如下: <ul class="menu"> <li>菜单项1</li> <li>菜单项2</li> <li>菜单项3</l…

    css 2023年6月9日
    00
  • 你知道CSS中长度单位pt、px、dpi的意思吗?

    当我们在CSS样式表中设置元素的长度和宽度等属性时,需要用到长度单位。在CSS中,长度单位分为绝对单位和相对单位。其中,常见的绝对单位有pt、px、dpi等。 pt:pt是一种印刷单位,代表了1/72英寸,等同于1/6英分之一英寸。在印刷和排版领域中比较常用,因为它可以相对精准的表示印刷品的大小,但在Web开发中使用比较少。 px:px是像素单位,代表屏幕上…

    css 2023年6月9日
    00
  • uniapp获取底部安全距离以及状态栏高度等

    Uniapp 是一种开源跨平台应用程序框架,可以使用 Vue.js 开发多个平台(如 H5、APP、小程序等)的应用。在开发 Uniapp 应用时,需要获取底部安全距离以及状态栏高度等信息,以适配不同终端的显示效果。 在 Uniapp 中,获取底部安全距离可以使用以下代码: // 获取底部安全距离 let safeArea = uni.getSystemIn…

    css 2023年6月9日
    00
  • 使用js操作css实现js改变背景图片示例

    当我们需要动态修改页面外观时,就可以使用JavaScript来操作CSS。以下是使用JS操作CSS来实现背景图片更换的示例攻略。 步骤1:获取DOM元素 首先,在JS中获取需要更改背景图片的DOM元素,可以使用getElementById()方法,例如: const divElement = document.getElementById(‘myDiv’);…

    css 2023年6月9日
    00
  • Element-Plus之el-col与el-row快速布局

    为了更好地介绍Element Plus中的el-col和el-row布局,我将按照以下顺序逐步展开: 简单介绍Element Plus的el-col和el-row组件 讲解如何使用el-row和el-col实现快速布局 提供两条使用el-row和el-col的布局示例 一、简介 Element Plus是一个组件库,提供了很多常用的组件用于构建Web页面。其…

    css 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部