实现图片自动播放与左右箭头进行一个图片的播放

#实现图片自动播放与左右箭头进行一个图片的播放| 来源: 网络整理| 查看: 265

-----20220514 前端作业

需求部分

我们要求将html，css，js进行结合实现图片自动切换，具有淡出显示，淡出消失的功能，并且可以通过左右标签或左下角的圆圈来进行一个图片的转换

效果图

轮播图实现效果

js代码解释

首先通过getElementsByClassName的方法，将文档中所有指定类名的元素集合作为 NodeList 对象。然后通过getElementByID，返回对拥有指定 ID 的第一个对象的引用，就这样引用左右标签。之后通过清除class，为我们定义的参数items，circles加指定的属性，并为其赋指定的值开始定时器的方法为摁右边的按钮，其他的部分代码上有注释，较为清楚

源码部分 js部分 window.onload=function(){ var items=document.getElementsByClassName("item"); //getElementsByClassName() 方法返回文档中所有指定类名的元素集合 //作为 NodeList 对象。 //NodeList 对象代表一个有顺序的节点列表。NodeList 对象 //我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。 var circles=document.getElementsByClassName("circle"); var leftBtn=document.getElementById("btn-left"); //可返回对拥有指定 ID 的第一个对象的引用。 var rightBtn=document.getElementById("btn-right"); var content=document.querySelector('.contect'); //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 var index=0; var timer=null; //清除class var clearclass=function(){ for(let i=0;i clearclass(); items[index].className="item active"; circles[index].className="circle white"; } //点击右边按钮切换下一张图片 rightBtn.onclick=function(){ if(index index=0; } move(); } //点击左边按钮切换上一张图片 leftBtn.onclick=function(){ if(index index=items.length-1; } move(); } //开始定时器，点击右边按钮，实现轮播 timer=setInterval(function(){ rightBtn.onclick(); },3000) //点击圆点时，跳转到对应图片 for(var i=0;i var point_index=this.getAttribute("num"); index=point_index; move(); }) } //鼠标移入清除定时器，并开启一个定时器，使慢慢转动 content.onmouseover=function(){ clearInterval(timer); //clearInterval() 方法可取消由 setInterval() 设置的 timeout。 //clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。 timer=setInterval(function(){ rightBtn.onclick(); },60000) } //鼠标移出又开启定时器 content.onmouseleave=function(){ clearInterval(timer); timer=setInterval(function(){ rightBtn.onclick(); },3000) } } css部分 *{ margin: 0; padding: 0; } body{ color: rgb(103, 57, 41); } .container{ width: 1010px; margin: 0 auto; background-color: #aaa; } .header{ width: 1000px; height: 250px; margin: 5px; background-color: #123; position: relative; } #item.a{ list-style: none; } #item.li{ list-style: none; } #item{ width: 100%; height: 100%; } .item{ position: absolute; opacity: 0; transition: all 1s; } .item.active{ opacity:1; } img{ width: 950px; height: 250px; } #btn-left{ width: 30px; height: 69px; font-size: 30px; color: white; background-color:rgba(0,0,0,0.4); line-height: 69px; padding-left:5px; z-index: 10;/*始终显示在图片的上层*/ position: absolute; left: 0; top: 50%; transform: translateY(-60%);/*使按钮向上偏移居中对齐*/ cursor: pointer; opacity: 0;/*平时隐藏*/ } .container:hover #btn-left{ /*鼠标滑入，显示图标*/ opacity: 1; } #btn-right{ width: 26px; height: 69px; font-size: 30px; color: white; background-color:rgba(0,0,0,0.4); line-height: 69px; padding-left: 5px; z-index: 10; position: absolute; right: 0; top: 50%; cursor: pointer; opacity: 0; transform: translateY(-60%); } .container:hover #btn-right{ opacity: 1; } #circle{ height: 20px; display: flex; position: absolute; bottom: 35px; right: 25px; } .circle{ width: 10px; height: 10px; border-radius: 10px; border: 2px solid white; background: rgba(0,0,0,0.4); cursor: pointer; margin: 5px; } .white{ background-color: #FFFFFF; } html部分 DOCTYPE html> 咖啡店 >

【本文地址】

公司简介

联系我们