wordpress新建页面有什么作用,百度快速优化软件,wordpress安装 503,商丘网络推广外包下面制作一个如下图所示的轮播图#xff08;按Enter键可以控制轮播的开启和关闭#xff0c;或者点击按钮“第几张”即可跳转到第几张#xff09;#xff1a; 下面是其HTML和CSS代码#xff08;还没有设置轮播#xff09;#xff1a; !DOCTYPE html
html …下面制作一个如下图所示的轮播图按Enter键可以控制轮播的开启和关闭或者点击按钮“第几张”即可跳转到第几张 下面是其HTML和CSS代码还没有设置轮播
!DOCTYPE html
html langen
head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 classcarousel-container img src./img_src/p1.jpg classcarousel-image idimg1 /div div classchange-imagep classbutton idp1第1张/pp classbutton idp2第2张/pp classbutton idp3第3张/pp classbutton idp4第4张/p /divscript/script/body
/html 下面开始制作轮播图制作以上轮播图可分为三个步骤
一、实现自动轮播
首先获取图片标签节点 const imgElement document.getElementById(img1);
然后设置一个布尔变量定义一个函数使用if条件语句如果条件为true就运行代码实现轮播修改img标签的图片路径 // 修改img标签的图片路径var i 1;var scroll_img true; //设置布尔变量function showNextImage1() { if(scroll_img){ //如果条件为true就运行代码实现轮播if(i4){i 1;}else{ imgElement.src ./img_src/p${i}.jpg;i i 1;} }}
最后使用定时函数每1秒切换一次图片 无限循环 setInterval(showNextImage1, 1000); // 每1秒切换一次图片 无限循环
这样自动轮播就设置好啦 二、实现带鼠标单击切换
首先设置好按钮CSS样式使其浮动起来排布在图片上方前面几张博客对浮动和清除浮动有详细讲解 .carousel-container .carousel-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; /* 不透明度0-1 */ } .change-image{width: 20%; 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;}
接下来获取每一个按钮标签节点使用监听鼠标单击事件修改其图片路径以实现四个按钮切换图片 // 【实现四个按钮切换图片】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;})这样带鼠标单击切换图片就做好啦
三、实现带键盘控制轮播开关 首先添加一个节点并输入提示文字然后为它设置CSS样式
!DOCTYPE html
html langen
head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title图片自动切换轮播图效果/title style /* 添加样式 */#output { color: white;background-color: green; text-align: center;width: 20%; height: 3%; margin-top: 1%; position : relative;left: 3%; border-radius: 10px;} /style
/head
body //插入节点div idoutput图片轮播开启......(按Enter键关闭轮播)/div/body
/html
接着获取显示按键信息的元素并且监听整个文档的keydown事件 const outputDiv document.getElementById(output); // 获取显示按键信息的元素document.addEventListener(keydown, );// 监听整个文档的keydown事件
然后定义一个函数并且写出获取按键的代码 document.addEventListener(keydown, // 监听整个文档的keydown事件function(event) { const keyCode event.key; // 获取按键的代码包括数字键和特殊键如箭头键、功能键等});
接着设置如果按下的键为Enter键使布尔变量scroll_img取反false使上面修改图片路径的代码运行不了 document.addEventListener(keydown, // 监听整个文档的keydown事件function(event) { const keyCode event.key; // 获取按键的代码包括数字键和特殊键如箭头键、功能键等if(keyCodeEnter){scroll_img !scroll_img; }});
最后使用if条件语句设置提示信息样式如果是scroll_imgtrue背景色为绿色否则为红色 document.addEventListener(keydown, // 监听整个文档的keydown事件function(event) { const keyCode event.key; // 获取按键的代码包括数字键和特殊键如箭头键、功能键等if(keyCodeEnter){scroll_img !scroll_img; }//将提示信息添加到输出区域 if (scroll_img) {outputDiv.textContent 图片轮播开启......(按Enter键关闭轮播);outputDiv.style.backgroundColor green;} else {outputDiv.textContent 图片轮播关闭......(按Enter键开启轮播);outputDiv.style.backgroundColor red;}});
这样一个可以使用键盘控制的完整的轮播图就做好啦 完整代码在这里
!DOCTYPE html
html langen
head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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: 20%; 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: green; text-align: center;width: 20%; height: 3%; margin-top: 1%; position : relative;left: 3%; border-radius: 10px;} .clear_ele::after{content: ; /* 这个伪元素的内容属性必须有 */display: block;/* border: 6px purple dashed; */clear: both;}/style
/head
body div classcarousel-container img src./img_src/p1.jpg classcarousel-image idimg1 /div div classclear_ele change-imagep classbutton idp1第1张/pp classbutton idp2第2张/pp classbutton idp3第3张/pp classbutton idp4第4张/p /divdiv idoutput图片轮播开启......(按Enter键关闭轮播)/divscript // 【实现自动轮播】const imgElement document.getElementById(img1); var i 1;var scroll_img true;function showNextImage1() { if(scroll_img){if(i4){i 1;}else{ imgElement.src ./img_src/p${i}.jpg;i i 1;} }} // 每1秒切换一次图片 无限循环setInterval(showNextImage1, 1000); // 【实现四个按钮切换图片】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); // 获取显示按键信息的元素document.addEventListener(keydown, // 监听整个文档的keydown事件function(event) { const keyCode event.key; // 获取按键的代码包括数字键和特殊键如箭头键、功能键等if(keyCodeEnter){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
