<!DOCTYPE html> <html >
<head> <meta charset="UTF-8">
<title>Document</title> </head>
<body> <img src="https://www.cnblogs.com/lxabner/p/img/1.jpeg" id="flower"> <br> <button id="prve">上</button> <button id="next">下</button> <script> // 獲取id var flower=document.getElementById('flower'); var nextbtn=document.getElementById('next'); var prve=document.getElementById('prve'); var minindex=1; maxindex=4;currentindex=minindex; //定義點擊事件 nextbtn.onclick=function(){ currentindex++; if(currentindex==maxindex) { currentindex=1; } flower.setAttribute('src','img/'+currentindex+'.jpeg') }
prve.onclick=function(){ currentindex--; if(currentindex==minindex) { currentindex=4; } flower.setAttribute('src','img/'+currentindex+'.jpeg') } </script> </body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/148169.html
標籤：JavaScript
上一篇：NodeJs-promise和async_await語法
下一篇：06.JS物件-1