收藏
批改状态：合格
老师批语：渐显是利用透明度来做的, 是对的
轮播图实现五秒钟自动切换，图片渐渐显示的功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图渐显功能</title>
<style>
.box{
position:relative;
width: 1200px;
height: 400px;
margin: 0 auto;
}
img{
opacity: 0;
}
.box .slider{
width: 1200px;
height: 400px;
display: none; /*元素不会被显示。*/
}
.box .slider.active{
display: block; /*元素将显示为块级元素，此元素前后会带有换行符 */
}
.box .point-list{
position: absolute;
left: 50%;
margin-left: -48px;
top:360px;
}
.box .point-list .point{
display: inline-block;
width: 15px;
height: 15px;
margin: 0 5px;
background-color: white;
border-radius:50%;
}
.box .point-list .point.active{
background-color: black;
}
.box .point-list .point:hover{
/*cursor 一些不同的光标*/
/*pointer 光标呈现为指示链接的指针（一只手）*/
cursor:pointer;
}
.skip{
position: absolute;
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
background-color: lightgray;
color: black;
opacity:0.3;
font-size: 36px;
top:170px;
border-radius:50% ;
}
.box .prev{
left:0;
}
.box .next{
right: 0;
}
.box .skip:hover{
cursor:pointer;
opacity: 0.6;
color: red;
}
</style>
</head>
<body>
<div class="box">
<!--轮播图片-->
<img src="images/banner1.jpg" alt="" data-index="1" class="slider active">
<img src="images/banner2.jpg" alt="" data-index="2" class="slider">
<img src="images/banner3.jpg" alt="" data-index="3" class="slider">
<!--轮播小圆点-->
<div class="point-list">
<!--<span class="point active" data-index="1"></span>-->
<!--<span class="point " data-index="2"></span>-->
</div>
<!--轮播左右切换按钮-->
<span class="skip prev"> < </span>
<span class="skip next"> > </span>
</div>
<script>
//获取所有图片,将图片列表由HTML集合转为真正的数组类型
var imgs=document.images;
var imgArr=Array.prototype.slice.call(imgs,0);
// console.log(imgArr);
// load: 当页面加载完成会自动调用，防止第一张图片因为透明度为0而不显示
window.addEventListener('load',fadeIn(imgArr[0]),false);
//获取小圆点父节点
var pointList=document.getElementsByClassName('point-list')[0];
// 设置小圆点的数量与样式, 与图片的数量关联,实现每添加一张图, 小圆点数量自动更新
// img: 当前元素 index: 当前元素的索引值。
imgArr.forEach(function (img,index) {
var span=document.createElement('span');
if(index===0){
span.classList.add('point','active');
}else{
span.classList.add('point');
}
//让小圆点的data-index属性与图片的data-index属性一致，使小圆点与图片一一对应
span.dataset.index=img.dataset.index;
pointList.appendChild(span);
});
// 获取所有的小圆点,将小圆点的html集合, 转为真正的数组
var points=document.getElementsByClassName('point');
pointArr=Array.prototype.slice.call(points,0);
// 为小圆点设置点击事件,切换图片
pointArr.forEach(function (point) {
point.addEventListener('click',setImgActive,false);
});
// 设置图片切换
function setImgActive(event) {
// event.target: 当前被点击的对象,就是小圆点
imgArr.forEach(function (img) {
// 根据小圆点的data-index值与图片data-index对应关系来确定需要切换的图片
if(img.dataset.index===event.target.dataset.index){
// 去掉原来所有图片上的激活样式
imgArr.forEach(function (img1) {
img1.classList.remove('active');
img1.style.opacity='0';//切换图片后修改图片透明度为0
});
// 设置当前图片为显示激活状态
img.classList.add('active');
fadeIn(img);
// 设置小圆点的当前激活与高亮状态
setPointActive(img.dataset.index);
}
});
}
// 获取翻页跳转按钮
var skip =document.getElementsByClassName('skip');
var leftskip=document.getElementsByClassName('skip')[0];
var rightskip=document.getElementsByClassName('skip')[1];
// 为翻页按钮添加事件
leftskip.addEventListener('click',skipImg,false);
rightskip.addEventListener('click',skipImg,false);
function skipImg(event) {
// 获取当前正在显示的图片
var currentImg=null;
imgArr.forEach(function (img) {
//contains(class) 返回布尔值，判断指定的类名是否存在。
if(img.classList.contains('active')){
currentImg=img;
}
});
// 判断点击的是显示前一个图片
if(event.target.classList.contains('prev')){
// 显示前一个兄弟元素节点
// 移除当前图片高亮, 不要再显示
currentImg.classList.remove('active');
currentImg.style.opacity='0';
// 更新当前图片节点
currentImg=currentImg.previousElementSibling;
// 显示前一个兄弟元素节点
if(currentImg!==null && currentImg.nodeName==='IMG'){
// 高亮前一个兄弟节点图片
currentImg.classList.add('active');
}else{
// 如果不存在前一个兄弟节点,则显示最后一个,以此来循环显示
// 高亮最后一个兄弟节点图片
currentImg=imgArr[imgArr.length-1];
currentImg.classList.add('active');
}
}
// 判断是否是点击了显示后一个图片
if(event.target.classList.contains('next')){
currentImg.classList.remove('active');
currentImg.style.opacity='0';
//console.log( currentImg.style.opacity);
currentImg=currentImg.nextElementSibling;
// 显示后一个兄弟元素节点
if(currentImg!==null &¤tImg.nodeName==='IMG'){
currentImg.classList.add('active');
}else{
// 如果不存在后一个兄弟节点,则显示第一个,以此来循环显示
// 高亮第一个兄弟节点图片, 索引为0
currentImg=imgArr[0];
currentImg.classList.add('active');
}
}
fadeIn(currentImg);
// 获取当前显示的图片的data-index
var imgIndex=currentImg.dataset.index;
setPointActive(imgIndex);
}
// 设置小圆点高亮
function setPointActive(imgIndex) {
// 清除小圆点原有的高亮
pointArr.forEach(function (point) {
point.classList.remove('active');
});
pointArr.forEach(function (point) {
if(point.dataset.index===imgIndex){
point.classList.add('active');
}
});
}
// 定时器: 每隔5秒自动切换
// 这类自动操作最适合事件模拟器完成
// 这里选择点击下一页的按钮事件来做(上一页也可以,随意)
// 利用鼠标移入与移出事件来启动/关闭定时器
var box=document.getElementsByClassName('box')[0];
// 创建定时器并初始化
var timer=null;
// 创建鼠标移动事件监听器
// 1. 当鼠标移出轮播图区域时, 启动定时器控制轮播图的播放
box.addEventListener('mouseout',startTimer,false);
// 2. 当鼠标移入到轮播图区域时, 清除定时器,由用户点击来控制轮播图的播放
box.addEventListener('mouseover',clearTimer,false);
// startTimer: 启动定时器的方法
function startTimer() {
// 先生成了一个自定义的点击事件对象
var clickEvent=new Event('click');
timer=setInterval(function () {
// 将自定义的点击事件分配给下一页按钮,实现自动点击
rightskip.dispatchEvent(clickEvent);
},5000);
}
// clearTimer: 清除定时器的方法
function clearTimer() {
clearInterval(timer);
}
//渐显函数
function fadeIn(img) {
opa=parseInt(window.getComputedStyle(img).opacity);//获取当前图片的透明度，图片透明度一开始设置为0
var timer=setInterval(function () {
// console.log(opa);
opa = opa+0.15;
img.style.opacity=opa;
// 当透明度大于或等于1应该停止,关闭定时器
if(opa>=1){
clearInterval(timer);
return false;
}
},200);
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
