JavaScript案例-轮播图
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>