极客教程如何使用jQuery创建一个带有淡入淡出的照片幻灯片
在这篇文章中，我们将用jQuery fadeIn()和fadeOut()函数创建一个简单的幻灯片。
步骤:
- 为了实现所有图片的幻灯片效果，我们将使用JavaScript的Interval()函数。这个函数以指定的时间间隔调用一个函数或评估一个表达式，时间间隔以毫秒为单位。
- fadeIn()。这个方法逐渐增加所选元素的不透明度，也就是说，它从隐藏变为可见。
- fadeOut()。该方法用于淡出一个特定的元素。
例子：在下面的代码中，我们正在创建一个HTML <div>元素。并加上我们幻灯片的第一张图片。接下来，我们要添加CSS来设计我们的幻灯片。然后，我们将jQuery库加载到我们的脚本中。
我们正在使用一个数组来存储我们的幻灯片的所有图片。我们正在使用setInterval()函数与fadeIn()和fadeOut()。我们正在使用attr()方法来改变图片来源。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<style>
.slideshow {
margin: auto;
width: 60%;
border: 3px solid #73ad21;
padding: 10px;
}
.slideshow img {
width: 100%;
height: 100%;
}
</style>
<script>
(document).ready(function () {
var pic =("img:first");
var images = [
"https://media.geeksforgeeks.org/wp-content/uploads/20210629182827/img1.jpg",
"https://media.geeksforgeeks.org/wp-content/uploads/20210629182923/img2.jpg",
"https://media.geeksforgeeks.org/wp-content/uploads/20210629182952/img3.jpg",
"https://media.geeksforgeeks.org/wp-content/uploads/20210629183022/img4.jpg",
];
var i = 0;
setInterval(function () {
// Returns 0, 1, 2, 3, 0, 1, 2, ....
i = (i + 1) % images.length;
pic.fadeOut(250, function () {
(this).attr("src", images[i]);
(this).fadeIn(1050);
});
}, 5000);
});
</script>
</head>
<body>
<div class="slideshow">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210629182827/img1.jpg" />
</div>
</body>
</html>
输出:
