<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background-color: #000000; } #box{ width: 400px; height: 400px; } #box div{ width: 300px; height: 200px; display: none; background-color: #ffffff; padding: 0.5em; } #box div img{ max-width: 300px; max-height: 200px; } input{ border: none; padding: 0.5em 1em; cursor: pointer; background-color: #767676; text-align: center; color: #ffffff; border-radius: 5px 5px 0 0; } .on{ color: #000; background-color: #fff; } </style> </head> <body> <div id="box"> <input type="button" value="切换1"> <input type="button" value="切换2"> <input type="button" value="切换3"> <div style="display: block;"> <img src="../img/1.png"> </div> <div><img src="../img/2.png"></div> <div><img src="../img/3.png"></div> </div> <script> var oInput = document.getElementsByTagName("input"); var oBox = document.getElementById("box"); var oDiv = oBox.getElementsByTagName("div"); function change(curIndex) { for(var i=0;i<oInput.length;i++){ oInput[i].className = " "; oDiv[i].style.display = "none"; } oInput[curIndex].className = "on"; oDiv[curIndex].style.display = "block"; } var index=0; var timer = null; timer = setInterval(play,1000); function play() { index++; if (index == oInput.length) { index = 0; } change(index); } play(); for(var i=0;i<oInput.length;i++){ oInput[i].onmouseover = function () { clearInterval(timer) }; oInput[i].onmouseout = function () { timer = setInterval(play,1000); } } </script> </body> </html>
