JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)

下面是是对dom操作的一个综合练习

下面代码是html的基本骨架(没有任何的功能):

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>图片自动切换(轮播图效果)</title>

<style>

body, html {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

}

.carousel-container {

position: relative;

width: 25%;

height: 40%; /* 根据需要设置高度 */

border: 4px red solid;

background-color: gray;

}

.carousel-image {

width: 100%;

height: 100%;

}

</style>

</head>

<body>

<div class="carousel-container">

<img src="./img_src/p1.jpg" class="carousel-image" id="img1">

</div>

<div class="change-image">

<p class="button" id="p1">第1张</p>

<p class="button" id="p2">第2张</p>

<p class="button" id="p3">第3张</p>

<p class="button" id="p4">第4张</p>

</div>

<script>

</script>

</body>

</html>

运行截图:

第一种功能是让4张图片实现自动轮播

一共可以有两种方式可以实现让它自动轮播的效果:

第一种:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>图片自动切换(轮播图效果)</title>

<style>

body, html {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

}

.carousel-container {

position: relative;

width: 25%;

height: 40%; /* 根据需要设置高度 */

border: 4px red solid;

background-color: gray;

}

.carousel-container .carousel-image {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 1; /* 不透明度0-1 */

}

</style>

</head>

<body>

<div class="carousel-container">

<img src="./img_src/p1.jpg" class="carousel-image" id="img1">

</div>

<div class="clear_ele change-image">

<p class="button" id="p1">第1张</p>

<p class="button" id="p2">第2张</p>

<p class="button" id="p3">第3张</p>

<p class="button" id="p4">第4张</p>

</div>

<script>

// 【实现自动轮播】

const imgElement = document.getElementById("img1");

var i = 1;

// 修改img标签的图片路径

function showNextImage1() {

if(i>4){

i = 1;

}else{

imgElement.src = `./img_src/p${i}.jpg`;

i = i + 1;

}

}

// 每1秒切换一次图片 (无限循环)

setInterval(showNextImage1, 1500);

</script>

</body>

</html>

第二种(把上面红色代码替换就行):

//【实现自动轮播】直接改整个父节点下节点(innerHTML实现)

const divElement = document.getElementsByClassName("carousel-container")[0];

var i = 1;

function showNextImage2() {

if(i>4){

i = 1;

}else{

divElement.innerHTML = `<img src="./img_src/p${i}.jpg" class="carousel-image active" id="img1">`

i = i + 1;

}

}

运行截图(因作者个人技术原因,上传不去录屏,用截图代替):

第二种功能是实现四个按钮切换图片,以下为该功能代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>图片自动切换(轮播图效果)</title>

<style>

body, html {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

}

.carousel-container {

position: relative;

width: 25%;

height: 40%; /* 根据需要设置高度 */

border: 4px red solid;

background-color: gray;

}

.carousel-container .carousel-image {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 1; /* 不透明度0-1 */

}

.change-image{

width: 15%;

height: 3%;

/* border: 1px purple solid; */

position: absolute;

top: 30%;

left: 5%;

}

.change-image .button{

width: 60px;

height: 30px;

color: white;

text-align: center;

background-color: red;

border-radius: 10px;

margin-left: 9px;

float: left;

}

.clear_ele::after{

content: ""; /* 这个伪元素的内容属性必须有 */

display: block;

/* border: 6px purple dashed; */

clear: both;

}

</style>

</head>

<body>

<div class="carousel-container">

<img src="./img_src/p1.jpg" class="carousel-image" id="img1">

</div>

<div class="clear_ele change-image">

<p class="button" id="p1">第1张</p>

<p class="button" id="p2">第2张</p>

<p class="button" id="p3">第3张</p>

<p class="button" id="p4">第4张</p>

</div>

<script>

// 【实现自动轮播】

const imgElement = document.getElementById("img1");

var i = 1;

// 修改img标签的图片路径

function showNextImage1() {

if(i>4){

i = 1;

}else{

imgElement.src = `./img_src/p${i}.jpg`;

i = i + 1;

}

}

// 每1秒切换一次图片 (无限循环)

setInterval(showNextImage1, 1500);

// 【实现四个按钮切换图片】

const p = document.getElementsByTagName("p");

p[0].addEventListener("click",

function(){

i = 1;

imgElement.src = `./img_src/p${i}.jpg`;

}

)

p[1].addEventListener("click",

function(){

i = 2;

imgElement.src = `./img_src/p${i}.jpg`;

}

)

p[2].addEventListener("click",

function(){

i = 3;

imgElement.src = `./img_src/p${i}.jpg`;

}

)

p[3].addEventListener("click",

function(){

i = 4;

imgElement.src = `./img_src/p${i}.jpg`;

}

)

</script>

</body>

</html>

运行结果(点想看的张数可直接跳转到第几张):

​​​​​​​ ​​​​​​​ ​​​​​​​

**第三种功能是实现回车键控制轮播,**以下为该功能代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>图片自动切换(轮播图效果)</title>

<style>

body, html {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

}

.carousel-container {

position: relative;

width: 25%;

height: 40%; /* 根据需要设置高度 */

border: 4px red solid;

background-color: gray;

}

.carousel-container .carousel-image {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 1; /* 不透明度0-1 */

}

.change-image{

width: 15%;

height: 3%;

/* border: 1px purple solid; */

position: absolute;

top: 30%;

left: 5%;

}

.change-image .button{

width: 60px;

height: 30px;

color: white;

text-align: center;

background-color: red;

border-radius: 10px;

margin-left: 9px;

float: left;

}

#output {

color: white;

background-color: red;

text-align: center;

width: 15%;

height: 3%;

margin-top: 1%;

position: relative;

left: 5%;

border-radius: 10px;

}

.clear_ele::after{

content: ""; /* 这个伪元素的内容属性必须有 */

display: block;

/* border: 6px purple dashed; */

clear: both;

}

</style>

</head>

<body>

<div class="carousel-container">

<img src="./img_src/p1.jpg" class="carousel-image" id="img1">

</div>

<div class="clear_ele change-image">

<p class="button" id="p1">第1张</p>

<p class="button" id="p2">第2张</p>

<p class="button" id="p3">第3张</p>

<p class="button" id="p4">第4张</p>

</div>

<div id="output">图片轮播关闭......(按Enter键开启轮播)</div>

<script>

// 【实现自动轮播】

const imgElement = document.getElementById("img1");

var i = 1;

var scroll_img = false;

function showNextImage1() {

if(scroll_img){

if(i>4){

i = 1;

}else{

imgElement.src = `./img_src/p${i}.jpg`;

i = i + 1;

}

}

}

// 每1秒切换一次图片 (无限循环)

setInterval(showNextImage1, 1500);

// 【实现四个按钮切换图片】

const p = document.getElementsByTagName("p");

p[0].addEventListener("click",

function(){

i = 1;

imgElement.src = `./img_src/p${i}.jpg`;

}

)

p[1].addEventListener("click",

function(){

i = 2;

imgElement.src = `./img_src/p${i}.jpg`;

}

)

p[2].addEventListener("click",

function(){

i = 3;

imgElement.src = `./img_src/p${i}.jpg`;

}

)

p[3].addEventListener("click",

function(){

i = 4;

imgElement.src = `./img_src/p${i}.jpg`;

}

)

// 【实现回车键控制轮播是否开启】

// 获取显示按键信息的元素

const outputDiv = document.getElementById('output');

// 监听整个文档的keydown事件

document.addEventListener('keydown',

function(event) {

// 获取按键的代码(包括数字键和特殊键,如箭头键、功能键等)

const keyCode = event.key;

if(keyCode==="Enter"){

scroll_img = !scroll_img;

}

//将提示信息添加到输出区域

if (scroll_img) {

outputDiv.textContent = "图片轮播开启......(按Enter键关闭轮播)";

outputDiv.style.backgroundColor = "green";

} else {

outputDiv.textContent = "图片轮播关闭......(按Enter键开启轮播)";

outputDiv.style.backgroundColor = "red";

}

}

);

</script>

</body>

</html>

运行结果(未按回车键版):

​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​

运行结果(已按回车键版):

(注:若有疑问,可发评论,作者看到会回复)

相关推荐
北辰浮光几秒前
[Mybatis-plus]
java·开发语言·mybatis
烛阴14 分钟前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言19 分钟前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴29 分钟前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
光而不耀@lgy34 分钟前
C++初登门槛
linux·开发语言·网络·c++·后端
lkbhua莱克瓦2439 分钟前
用C语言实现——一个中缀表达式的计算器。支持用户输入和动画演示过程。
c语言·开发语言·数据结构·链表·学习方法·交友·计算器
Mr__Miss42 分钟前
面试踩过的坑
java·开发语言
啊丢_44 分钟前
C++——Lambda表达式
开发语言·c++
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket