var imgs = ["https://istack.dev59.com/mucrb.webp",
"https://istack.dev59.com/0BH67.webp",
"https://istack.dev59.com/KdNeR.webp",
"https://istack.dev59.com/StOAl.webp",
"https://istack.dev59.com/yhvqi.webp"];
bs = document.getElementsByTagName("button");
for(var i =0;i<bs.length;i++){
bs[i].addEventListener("click",showImg);
}
pLeft =document.getElementById("left");
pLeft.addEventListener("click",prevImg);
pRight =document.getElementById("right");
pRight.addEventListener("click",nextImg);
function showImg(e){
x = e.target.getAttribute("order");
document.getElementById("loopImg").setAttribute("src",imgs[x-1]);
}
function nextImg(e){
x = e.target.getAttribute("order");
if(x == imgs.length-1){
x = 0;}
else{
x = x+1;}
document.getElementById("loopImg").setAttribute("src",imgs[x]);
}
function prevImg(e){
x = e.target.getAttribute("order");
if(x == 0){
x = imgs.length-1;}
else{
x = x-1;}
document.getElementById("loopImg").setAttribute("src",imgs[x]);
}
#main{
width:600px;
height:400px;
border:1px solid red;
display:grid;
grid-template-columns:60px auto 60px;
grid-template-rows:60px auto 60px;
grid-template-areas:"des des des"
"left loopImg right"
"buttons buttons buttons";
margin:0 auto;
}
#des{
grid-column: 1/4;
grid-row:1/2;
margin:auto;
}
#loopImg{
grid-column:2/3;
grid-row:2/3;
border:1px solid green;
margin:auto;
}
#left{
grid-column:1/2;
grid-row:2/3;
margin:auto;
}
#right{
grid-column:3/4;
grid-row:2/3;
margin:auto;
}
#buttons{
grid-column:1/4;
grid-row:3/4;
margin:auto;
}
button{
width:30px;
height:30px;
border:1px solid green;
border-radius:50%;
}
img{
width:200px;
height:200px;
}
<div id="main">
<div id="des">loop images</div>
<img id="loopImg" src="i1.png" alt="">
<p id="left"><</p>
<p id="right">></p>
<div id="buttons">
<button order="1" >1</button>
<button order="2" >2</button>
<button order="3" >3</button>
<button order="4" >4</button>
<button order="5" >5</button>
</div>
</div>
我想编写一个循环图片的JavaScript脚本。
点击按钮后,图片可以根据按钮上的数字进行显示。
为什么点击nextImg和prevImg时无法设置元素的src属性?
nextImg只能在第一次单击时起作用,第二次单击时无法运行。
prevImg根本无法工作。
当点击pLeft和pRight键时,可以获取顺序号,如何获取顺序号?
在nextImg和prevImg中,语句x = e.target.getAttribute("order");
无法获取图像的顺序号,如何修复?
{}
)方案之一,而不是上面使用的方案。编辑该代码比应该更难。 - T.J. Crowder<
和>
替换<和>。 - showkey