javascript 實現圖片2秒自動切換 滑鼠懸浮切換圖片
阿新 • • 發佈：2018-12-15
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片2s自動切換</title> <script type="text/javascript"> var img = ["image/mao1.jpg","image/mao2.jpg","image/mao3.jpg"] var nums=0 function change() { nums++ if (nums === 3) {nums = 0} document.getElementById("mao").src =img[nums] } setInterval("change()", 2000) function image(n) { document.getElementById("mao").src = img[n]} </script> <style type="text/css"> ul{ /*border:1px solid red;*/ float: left; margin-top:5px; margin-left:100px; } ul li{ float:left ; margin:0 20px; } </style> </head> <body > <div > <img id="mao" src="image/mao1.jpg" width="400" height="200"> </div> <div> <ul type="circle"> <li onmouseover="image(0)"></li> <li onmouseover="image(1)"></li> <li onmouseover="image(2)"></li> </ul> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2s</title> <style type="text/css"> #adv{ border: 1px solid blue; height: 470px; width: 590px; background-image: url("image/mao1.jpg"); } #adv ul { list-style-type: circle; /*border: 1px solid red;*/ margin-top: 440px; } #adv ul li { float: left; } </style> <script type="text/javascript"> index = 1 function roleImage() { index++ if(index===4){ index = 1 } adv = document.getElementById("adv") adv.style.backgroundImage="url('image/mao"+index+".jpg')" } setInterval(roleImage,2000) function image(index) { adv.style.backgroundImage="url('image/mao"+index+".jpg')" } </script> </head> <body> <div id="adv"> <ul> <li onmouseover="image(1)">  </li> <li onmouseover="image(2)">  </li> <li onmouseover="image(3)">  </li> </ul> </div> </body> </html>