3秒一換輪播（鼠標選中旋轉停止定時） 動畫案例
阿新 • • 發佈：2017-09-17
itl html meta family img kit lun type -c
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>廣告輪播</title> <script type="text/javascript" src="tzy.js" language="JavaScript"></script> <link rel="stylesheet" href="tzy.css" type="text/css"> </head><body onload="lunbozantin()"> <div> <p><b>我是輪播圖片</b></p> <img src="1.jpg" alt="lol圖片" id="tupian" onMouseOver="stoplunbo()" onMouseOut="lunbozantin()"> </div> </body> </html>
*{ margin:0px; padding:0px; } div{ width: 508px; height: 330px; margin: 100px auto; padding: 5px; background-color: coral; } p{ width: 528px; height: 30px; text-align: center; font-family: "楷體"; line-height: 30px; font-size: 25px; } img{ width: auto; height: auto; background-color: deepskyblue; -webkit-transition: width 1s, height 1s, -webkit-transform 1s; /*暫定高寬無變化自動,有變化則為1秒*/ transition: width 1s, height 1s, transform 1s; } img:hover{ width: auto; height: auto; transform:rotate(360deg); -webkit-transform:rotate(360deg); }
var arr = new Array("1.jpg","2.jpg","3.jpg","4.jpg"); var count = 1; var b; function lunbo() { a = document.getElementById("tupian"); a.src =arr[count]; count++; if(count==4){ count=0; } } function stoplunbo(){ clearInterval(b); }function lunbozantin() { b = setInterval(lunbo,3000); }
3秒一換輪播（鼠標選中旋轉停止定時） 動畫案例