数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学使用 JavaScript 实现图像渐隐过渡效果
图像过渡是指更改图像，用一个图像替换另一个图像。用户可以在图像滑块中看到图像过渡。
在开发图像滑块时，我们应该关注图像过渡的动画效果，以使应用程序的用户体验更具吸引力。在本教程中，我们将学习如何使用各种方法为图像过渡添加渐隐效果。
向图像添加类以显示具有渐隐效果的图像
我们可以使用 CSS 为图像过渡添加渐隐效果。CSS 的 transition 属性允许我们向图像添加任何过渡。因此，我们可以向一个类添加 CSS，并使用 JavaScript 向图像添加该类，这将向图像添加过渡。
语法
用户可以按照以下语法向图像添加类以显示具有渐隐效果的图像。
document.getElementById("image").classList = 'class_name';
在上面的语法中，我们使用 id 访问图像，并将“class_name”类添加到图像的类列表中。
示例
在下面的示例中，我们已将图像添加到网页，并使用一些 CSS 为图像指定了高度和宽度。此外，我们在 img 类中添加了值为 0 的 opacity。
此外，我们还向 animate 类添加了“transition”和“opacity”属性。最初，图像不包含“animate”类。当用户单击按钮时，它将执行 FadeIn() 函数，并将“animate”类添加到图像。
在输出中，我们可以观察到当我们添加“animate”类时，图像会淡入。
<html>
<head>
<style>
img {
opacity: 0;
}
.animate {
-webkit-transition: 2s;
transition: 2s;
opacity: 1;
}
</style>
</head>
<body>
<h2> Using the <i> class </i> to add fadding effect in image transition </h2>
<img id = "image" style = "width: 500px; height: 200px;" src = "https://tutorialspoint.com/static/images/logo-color.png" alt = "Logo Image"> <br>
<button type = "button" onclick = "FadeIn()"> Fade In image </button>
<script>
function FadeIn() {
document.getElementById("image").classList = 'animate';
}
</script>
</body>
</html>
使用 jQuery 的 fadeIn() 和 fadeout() 方法向图像添加渐隐过渡
JQuery 的 fadeout() 方法允许我们使用渐隐效果从网页中删除图像。fadeIn() 方法允许我们使用渐隐效果将图像添加到网页。
在这里，我们将使用 fadeout() 和 fadeIn() 方法为图像过渡添加适当的渐隐效果。
语法
用户可以按照以下语法使用 JQuery 的 fadeout() 和 fadeIn() 方法向图像过渡添加渐隐效果。
setInterval(fade, 3500);
function fade() {
$("#slider img").eq(current).fadeOut(0);
current = ++current % images.length;
$("#slider img").eq(current).fadeIn(2000);
}
在上面的语法中，current 变量跟踪要显示在网页上的图像。我们使用 fadeIn() 方法显示当前图像并隐藏所有其他图像。
步骤
步骤 1 – 使用类名访问所有图像。
步骤 2 – 使用 for 循环遍历所有图像，并使用图像的 display 属性隐藏除第一张图像之外的所有图像。
步骤 3 – 创建一个名为“current”的变量，并将其初始化为零。
步骤 4 – 创建一个 startImageTrans() 函数，并在其中使用 setInterval() 方法在每 3500 毫秒后调用 fade() 函数。但是，用户可以根据自己的需求设置时间间隔。
步骤 5 – 在 fade() 函数中，使用 JQuery 的 eq() 方法访问当前子元素。使用 fadeout() 方法隐藏当前图像。
步骤 6 – 将 current 变量的值增加 1，如果它大于图像总数，则将其设置为 0。
步骤 7 – 使用 fadeIn() 方法显示当前图像。
示例
在下面的示例中，我们创建了 HTML div 元素并添加了五个不同的图像。我们已经在 JavaScript 中实现了上述算法，以使用渐隐过渡效果逐一显示所有图像。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<style>
img {
height: 200px;
width: 500px;
}
</style>
</head>
<body>
<h3> Using the <i> jQuery fadeIn() method </i> to add fadding effect in image transition </h3>
<div id="slider">
<img src = "https://tutorialspoint.com/static/images/logocolor.png" class = "sliderImage" alt = "Image 1">
<img src ="https://tutorialspoint.com/images/trending_categories.svg" class = "sliderImage" alt = "Image 2">
<img src = "https://tutorialspoint.com/images/Data-Structure.png" class = "sliderImage" alt = "Image 3">
<img src = "https://tutorialspoint.com/images/Javascript.png" class = "sliderImage" alt = "Image 4">
</div>
<br> <br>
<button type = "button" onclick = "startImageTrans()"> Start Image Transitions </button>
<script>
let images = document.querySelectorAll('.sliderImage');
for (let i = 0; i < images.length; i++) {
if (i != 0)
images[i].style.display = "none";
}
var current = 0;
function startImageTrans() {
setInterval(fade, 3500);
}
function fade() {
// hide the previous image with fading effect
$("#slider img").eq(current).fadeOut(0);
current++;
current = current % images.length;
// show a current image with fading effect
$("#slider img").eq(current).fadeIn(2000);
}
</script>
</body>
</html>
使用 CSS transition 属性向图像过渡添加渐隐效果
在这种方法中，我们将为 HTML 元素设置背景图像。此外，我们还将为 HTML 元素的背景添加渐隐过渡。因此，每当我们更改背景时，它都会显示渐隐效果。
语法
用户可以按照以下语法使用 CSS transition 属性向背景图像添加渐隐效果。
<style>
#background-div {
background-image: url("image_URL");
transition: background 2s linear;
}
</style>
function FadeImage() {
imageDiv.style.backgroundImage = `url(${allImages[current]})`;
}
我们在上面的语法中使用 CSS 向元素添加了背景图像和“transition”属性。每当我们使用 JavaScript 更改背景图像时，它都会自动将渐隐过渡应用于图像。
示例
在下面的示例中，div 元素包含初始背景图像。我们创建了一个包含不同背景图像 URL 的 images 数组。我们使用 setInterval() 方法在每 3000 毫秒后调用 fadeInImage() 函数。
在 fadeInImage() 函数中，我们重复更改背景图像，并在图像更改时使用 CSS 应用渐隐过渡。
<html>
<head>
<style>
#background-div {
background-position: center;
background-size: cover;
background-image:
url("https://tutorialspoint.com/images/trending_categories.svg");
display: flex;
height: 300px;
width: 600px;
transition: background 2s linear;
}
</style>
</head>
<body>
<h3>Using the <i> CSS transition </i> to add fadding effect in image transition</h3>
<div id = "background-div"></div>
<script>
let allImages = [
"https://tutorialspoint.com/images/trending_categories.svg",
"https://tutorialspoint.com/javascript/images/javascript-minilogo.jpg",
"https://tutorialspoint.com/css/images/css-mini-logo.jpg",
]
const imageDiv = document.getElementById("background-div");
setInterval(FadeImage, 3000);
let current = 0;
function FadeImage() {
current++;
if (current >= allImages.length) current = 0;
imageDiv.style.backgroundImage = `url(${allImages[current]})`;
}
</script>
</body>
</html>
我们学习了三种向图像过渡添加渐隐效果的方法。在第二种方法中，我们使用了 JQuery 的 fadeIn() 和 fadeout() 方法，在第一种和第三种方法中使用了 CSS 的“transition”属性。
5K+ 浏览量
