当前位置：首页 > news >正文

JavaScript案例-轮播图

news 2024/11/23 20:09:17

JS轮播图是一种常见的网页动态效果，用于展示多张图片或内容，通常用于产品展示、新闻滚动等场景。

第一步：先设置一个基本框架，利用img属性导入图片。通过CSS样式修改图片的大小和页面布局。如图所示：

代码显示：


<style>  body, html {  margin: 0;  padding: 0; width: 100%; height: 100%;  }  .carousel-container {  position: relative;  /* 相对定位:根据自身原本的位置移动 */left: 20%;width: 50%;  height: 50%; /* 根据需要设置高度 */ border: 4px yellow 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: 80%;  height: 3%;  /* border: 1px purple solid; */position: absolute;top: 40%;left: 25%;}.change-image .button{        width: 80px;  height: 30px;color: white;text-align: center;background-color: rgb(94, 102, 79);border-radius: 10px;margin-left: 50px;float: left;}
</style> <body>  <div class="carousel-container">  <img src="./img/img1.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>
</body>

第二步：创建JavaScript脚本，先获取图片的节点（getElementById、getElementByClassName）。

 <script> const imgElement = document.getElementById("img1"); const divElement = document.getElementsByClassName("carousel-container")[0];</script>

第三步：定义一个变量。利用if-else判断修改img标签的图片路径。图片名称最好相似，便于修改。再使用setInterval使图片每一秒切换一次图片。

<script> 
// 修改img标签的图片路径function showNextImage1() {     if(i>4){i = 1;}else{               imgElement.src = `./img/img${i}.jpg`;i =  i + 1;    // 递增} } // 每1秒切换一次图片 （无限循环）setInterval(showNextImage1, 1500);
</script>

以上已完成轮播图的效果。以下设置图片播放时的点击效果。

设置鼠标监听，当鼠标点击“第一张”时，图片就会跳转到第一张图片，依此类推。

    <script>const p = document.getElementsByTagName("p");p[0].addEventListener("click",function(){i = 1;imgElement.src = `./img/img${i}.jpg`;})p[1].addEventListener("click",function(){i = 2;imgElement.src = `./img/img${i}.jpg`;})p[2].addEventListener("click",function(){i = 3; imgElement.src = `./img/img${i}.jpg`;})p[3].addEventListener("click",function(){i = 4;imgElement.src = `./img/img${i}.jpg`;})</script>

设置键盘监听事件，当按下“Enter”键时开始轮播，再次按下“Enter”键时停止轮播。

    <style>
#output {                          //可以直观的看到“Enter”键按下的情况margin-top: 20px;  padding: 10px;  border: 1px solid #ccc;  background-color: red;width: 300px;  height: 100px;  overflow-y: scroll;}  </style><div id="output">图片轮播关闭... （按Enter键开始轮播）</div><script>  const imgElement = document.getElementById("img1"); const divElement = document.getElementsByClassName("carousel-container")[0];var i = 1;// 修改img标签的图片路径function showNextImage1() {  if(!isScroll){if(i>4){i = 1;}else{               imgElement.src = `./img/img${i}.jpg`;i =  i + 1;     // 递增} }
}// 获取显示按键信息的元素  const outputDiv = document.getElementById('output');  var isScroll=false;// 监听整个文档的keydown事件  window.addEventListener('keydown',function(event) {  // 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）   const keyCode = event.key; // 将按键信息添加到输出区域  const message = `键盘 ${keyCode}被按下`; console.log(message);if(keyCode==="Enter"){isScroll=!isScroll; }if(!isScroll){//对控制轮播程序是否执行的布尔变量取反outputDiv.textContent = "轮播开启..."; outputDiv.style.backgroundColor="green";}else{outputDiv.textContent = "轮播结束..."; outputDiv.style.backgroundColor="yellowgreen";}})
</script>