JavaScript--实现图片轮播效果
如果想要实现图片轮播应该如何实现呢？
实现效果：
初始代码：
<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>原文地址：https://blog.csdn.net/2401_85545586/article/details/143678980
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！