基于JavaScript实现页面轮播图渐变效果的示例代码
作者：sharkerrrr
这篇文章主要给大家分享如何使用JavaScript实现一个页面轮播图渐变效果,轮播图是网页开发中常见的功能之一,它能够展示多个图片或内容,并以一定的时间间隔进行自动切换,而通过添加渐变效果,可以让切换过程更加平滑流畅,感兴趣的小伙伴可以自己动手尝试一下
在开始之前，我们需要准备一些基本的HTML和CSS。
HTML结构：
<div class="focus ">
<ul class="carousel">
<li class="opa"><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" https://p1-q.mafengwo.net/s19/M00/08/1E/CoNB_WU2Z10Pona2ACzRRnW5ARY.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg" alt=""></a></li>
<li><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" https://p1-q.mafengwo.net/s19/M00/92/FF/CoNB_GUzmHJqChXuACW_FtT4Ioo.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg" alt=""></a></li>
<li><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" https://p1-q.mafengwo.net/s19/M00/70/34/CoNFT2Uzk0xJFMtNACnheGMnxbw.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg" alt=""></a></li>
</ul>
<div class="arrowLeft"><</div> <!-- 左侧按钮 -->
<div class="arrowRight">></div> <!-- 右侧按钮 -->
<ol class="disc">
</ol>
</div>
CSS样式：
.focus {
position: relative;
width: 100%;
height: 500px;
margin-top: 0px;
overflow: hidden;
}
.carousel {
position: relative;
top: 0px;
width: 100%;
height: 100%;
left: 0px;
bottom: 0px;
}
.carousel li {
position: absolute; /*绝对定位*/
top: 0px;
left: 0px;
opacity: 0;
transition: all 1s; /*设置切换时过渡效果*/
}
.carousel li.opa { /*li和.opa之间,无空格*/
opacity: 1;
}
.carousel li img {
width: 100%;
height: auto; /*高度自适应*/ /*height: 100%; */ /*高度设为100%会超出容器高度*/
object-fit: cover; /*图片自适应大小并保持原比例*/
}
.focus div {
display: none;
position: absolute;
top: 50%;
transform: translate(0, -50%); /*上移，使垂直居中*/
width: 36px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 36px;
z-index: 99;
cursor: pointer; /*鼠标指针变为手型*/
}
.arrowLeft {
left: 10px;
}
.arrowRight {
right: 10px;
}
.arrowLeft:hover,.arrowRight:hover {
background-color: rgba(128, 128, 128, .5);
}
.disc {
position: absolute;
bottom: 0px;
right: 50%;
z-index: 99;
}
.disc li {
display: inline-block;
width: 15px;
height: 15px;
background-color: #ccc;
margin: 0 3px;
border-radius: 50%;
cursor: pointer;
}
.disc li.current { /*li和.current之间,无空格*/
background-color: #f00;
}
}
现在让我们开始编写JavaScript代码来实现轮播图渐变效果。
window.addEventListener('load', function () {
var focus = document.querySelector('.focus');
var arrowLeft = document.querySelector('.arrowLeft');
var arrowRight = document.querySelector('.arrowRight');
//鼠标移动到轮播图，左右箭头显示
focus.addEventListener('mouseover', function() {
arrowLeft.style.display = 'block';
arrowRight.style.display = 'block';
clearInterval(timer); //清除定时器
timer = null;
})
focus.addEventListener('mouseout', function() {
arrowLeft.style.display = 'none';
arrowRight.style.display = 'none';
timer = setInterval(function() { //鼠标离开，开启定时器
arrowRight.click();
}, 3000);
})
var ul = focus.querySelector('ul');
var ol = focus.querySelector('ol');
var num=ul.children.length;
var disc = 0;
//动态生成小圆点
for (let i = 0; i < num; i++) {
var li = document.createElement('li');
ol.appendChild(li);
li.addEventListener('click', function() {
for (let k = 0; k < num; k++) {
ol.children[k].className = '';
ul.children[k].className = '';
}
this.className = 'current';
ul.children[i].className = 'opa';
disc = i;
})
}
ol.children[0].className ='current';
//点击右侧箭头
arrowRight.addEventListener('click', function() {
disc++; //圆点样式
if (disc == num) {
disc = 0;
}
for (let k = 0; k < num; k++) {
ol.children[k].className = '';
ul.children[k].className = '';
}
ol.children[disc].className = 'current';
ul.children[disc].className = 'opa';
})
// 点击左侧按钮
arrowLeft.addEventListener('click', function() {
disc--;
if (disc < 0) {
disc = num - 1;
}
for (let k = 0; k < num; k++) {
ol.children[k].className = '';
ul.children[k].className = '';
}
ol.children[disc].className = 'current';
ul.children[disc].className = 'opa';
})
//自动播放，像点击右侧按钮
var timer = setInterval(function() {
arrowRight.click();
}, 3000);
})
让我们来解释一下代码的实现逻辑：
1. 首先，代码通过window.addEventListener('load', function () {...})监听页面加载完成的事件，这保证了代码在页面元素加载完毕后执行。
2. 代码使用querySelector方法获取了轮播图的相关元素，包括轮播图容器、左箭头和右箭头。
3. 鼠标移动到轮播图容器上时，触发mouseover事件的回调函数。在回调函数中，左右箭头的display属性被设置为block，即显示出来。同时，通过调用clearInterval清除定时器timer，并将其置为null，实现停止自动播放。
4. 鼠标移出轮播图容器时，触发mouseout事件的回调函数。在回调函数中，左右箭头的display属性被设置为none，即隐藏起来。通过调用setInterval设置定时器timer，每隔3秒点击一次右箭头，实现自动播放。
5. 代码通过querySelector方法获取轮播图容器中的ul和ol元素，分别代表图片列表和圆点列表。
6. 通过变量num获取图片列表中的子元素数量。
7. 使用for循环遍历图片列表的子元素数量，动态生成与图片数量相同的圆点，并将其添加到圆点列表中。同时为每个圆点添加点击事件的回调函数，在回调函数中处理圆点点击切换图片的逻辑。
8. 默认将第一个圆点添加current类名，表示当前活动圆点。
9. 当点击右侧箭头时，触发click事件的回调函数。在回调函数中，圆点的样式进行更新，通过添加和删除current类名来实现圆点的样式切换。同时，图片的样式也进行更新，通过添加和删除opa类名来实现图片的切换。
10. 当点击左侧箭头时，触发click事件的回调函数。逻辑与点击右侧箭头类似，只是圆点和图片的切换顺序相反。
11. 最后，通过设置定时器timer实现自动播放功能。定时器每隔3秒点击一次右侧箭头，从而切换到下一张图片。
通过以上代码的实现，我们成功地实现了采用JavaScript的页面轮播图渐变效果。
到此这篇关于基于JavaScript实现页面轮播图渐变效果的示例代码的文章就介绍到这了,更多相关JavaScript实现页面轮播图渐变内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！