2020년도 이전/[WebSig] JQuery
미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요. 단, 이미지는 9개가 있습니다. 9개까지 출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요.
시그시끄
2013. 7. 29. 16:18
images.zip
미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요.
단, 이미지는 9개가 있습니다. 9개까지 출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요.
| <!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <title></title> | |
| <style> | |
| body { | |
| font-size: 9pt; | |
| } | |
| div { | |
| border: 1px solid #999999; | |
| margin: 20px; | |
| margin-bottom: 20px; | |
| } | |
| div div { | |
| border: 1px dotted #CCC; | |
| font-size: 20px; | |
| } | |
| </style> | |
| <script> | |
| window.onload=function(){ | |
| var panel = document.getElementById('panel'); | |
| var img1 = document.getElementById('img1'); | |
| var cnt = 2; | |
| setInterval(function (){ | |
| if(cnt > 9){ | |
| cnt = 1; | |
| } | |
| img1.setAttribute('src', './images/img'+ cnt + '.jpg'); | |
| cnt++; | |
| }, 1000); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div> | |
| <h4> | |
| 미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요.<br> 단, 이미지는 9개가 있습니다. 9개까지 | |
| 출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요. | |
| </h4> | |
| <div id="panel"> | |
| <img id="img1" src="images/img1.jpg" alt="이미지"> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |