苏州相城区疫情最新情况_软件开发项目方案_黄冈网站推广优化找哪家_ip切换工具

如果想要实现图片轮播应该如何实现呢？

实现效果：

初始代码：

<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/lan1.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><div id="output"></div><script></script></body>  
</html>

运行结果：

首先要获取图片节点：

  //获取图片的节点const imgElement = document.getElementById("img1");

if函数修改图片的路径，注意必须要用``符号

  var i = 1;var img_ele=true;// 修改img标签的图片路径function showNextImage1() {     if(img_ele){if(i>4){i = 1;}else{               imgElement.src = `./img_src/lan${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/lan${i}.jpg`;})p[1].addEventListener("click",function(){i = 2;imgElement.src = `./img_src/lan${i}.jpg`;})p[2].addEventListener("click",function(){i = 3;imgElement.src = `./img_src/lan${i}.jpg`;})p[3].addEventListener("click",function(){i = 4;imgElement.src = `./img_src/lan${i}.jpg`;})

实现效果：

如果想要实现按Enter键图片停止轮播

首先添加键盘监听事件：

 // 监听整个文档的keydown事件  const outputDiv = document.getElementById('output');document.addEventListener('keydown',// 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）  function (event) { const keyCode = event.key;

获取 Enter键控制图片轮播

if(keyCode==="Enter") {// boolen类型取反img_ele=!img_ele;}if(img_ele){outputDiv. textContent="轮播开始...按Enter键停止";outputDiv.style.backgroundColor="green";}else{outputDiv.textContent="轮播关闭"outputDiv.style.backgroundColor="red";}});

全部代码：

 <title>图片自动切换（轮播图效果）</title>  <style>  body, html {  margin: 0;  padding: 0; width: 100%; height: 100%;  }  .carousel-container {  position: relative;  width: 35%;  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: 30%;  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{width:200px;height: 30px;background-color: green;position: absolute;left: 60px;border-radius: 10px;text-align: center;}</style>  
</head>  
<body>  <div class="carousel-container">  <img src="./img_src/lan1.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"); // const divElement = document.getElementsByClassName("carousel-container")[0];var i = 1;var img_ele=true;// 修改img标签的图片路径function showNextImage1() {     if(img_ele){if(i>4){i = 1;}else{               imgElement.src = `./img_src/lan${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/lan${i}.jpg`;})p[1].addEventListener("click",function(){i = 2;imgElement.src = `./img_src/lan${i}.jpg`;})p[2].addEventListener("click",function(){i = 3;imgElement.src = `./img_src/lan${i}.jpg`;})p[3].addEventListener("click",function(){i = 4;imgElement.src = `./img_src/lan${i}.jpg`;})// 监听整个文档的keydown事件  const outputDiv = document.getElementById('output');document.addEventListener('keydown',// 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）  function (event) { const keyCode = event.key;if(keyCode==="Enter") {// boolen类型取反img_ele=!img_ele;}if(img_ele){outputDiv. textContent="轮播开始...按Enter键停止";outputDiv.style.backgroundColor="green";}else{outputDiv.textContent="轮播关闭"outputDiv.style.backgroundColor="red";}});</script>  
</body>  
</html>

苏州相城区疫情最新情况_软件开发项目方案_黄冈网站推广优化找哪家_ip切换工具

推荐新闻

热搜词