本文详细介绍如何使用JavaScript结合HTML和CSS实现页面轮播图的渐变效果。通过监听鼠标事件控制箭头显示，利用定时器实现自动播放，并动态生成圆点导航。代码包含完整的HTML结构、CSS样式及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);
})
以下是对JavaScript代码实现逻辑的详细解析，帮助理解每个步骤的具体作用。
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实现页面轮播图渐变内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！