图片自动播放和动态添加
生活随笔
收集整理的這篇文章主要介紹了
图片自动播放和动态添加
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?圖片自動播放和動態添加
?
?
?
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <title>7-66 課堂演示</title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 <style type="text/css"> 8 img{ 9 border-style: groove; 10 border-width: 5px; 11 border-color: orange; 12 display:none; 13 } 14 input[type='button']{ 15 width: 60px; 16 height: 60px; 17 border-radius: 30px; 18 outline: none; 19 } 20 </style> 21 </head> 22 <body> 23 <input type="text" id="imgUrl" value=""> <br> 24 <input type="button" value="播放" onclick="autoPlay()"> 25 <input type="button" value="添加圖片" onclick="addImage()"><br> 26 <img src="" alt="" height="300" id="img"><br> 27 <script> 28 var imageArr=new Array('../img/sc1.png','../img/sc6.png'); 29 var index=0; 30 function autoPlay(){ 31 var imgObj=document.getElementById('img'); 32 imgObj.style.display='inline'; 33 if(imageArr.length<=0){ 34 imgObj.setAttribute('alt','圖片木有了，請添加') 35 }else{ 36 index=(index+1)%imageArr.length; 37 var imgId=imageArr[index] 38 imgObj.setAttribute('src',imgId) 39 } 40 setTimeout('autoPlay()',1000) 41 } 42 43 function addImage(){ 44 var imgUrl=document.getElementById('imgUrl').value; 45 imageArr.push(imgUrl) 46 } 47 </script> 48 </body> 49 </html>?
轉載于:https://www.cnblogs.com/Renyi-Fan/p/8093339.html
總結
以上是生活随笔為你收集整理的图片自动播放和动态添加的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【IneliJ 】使用IneliJ ID
- 下一篇： 后台获取(Background Fetc