<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0; padding: 0; } #cont{position: absolute; margin-left: 40%; margin-top: 40px; } #cont p:nth-of-type(1){ width: 20px; height: 30px; background: gray; position: absolute; left:0; top:50%; font-size: 14px; line-height: 30px; text-align: center; display: none; } #cont p:nth-of-type(2){ width: 20px; height: 30px; background: gray; position: absolute; right:0; top:50%; font-size: 14px; line-height: 30px; text-align: center; display: none; } </style> </head> <body> <div class="container"> <div id='cont'> <p id='btn'><</p> <img id='round' src='img/2.jpg'> <p Id ='sub'>></p> </div> </div> <script type="text/javascript"> var oSub = document.getElementById('sub'); var oCont = document.getElementById('cont'); / var/create Array arr = new Array (' 2. JPG ', '3. JPG', '4. JPG', '5. JPG', '6. JPG); Var timer = null; Var index = 0; function autoPlay(){ timer = setInterval(function(){ var Img = document.getElementById('round'); if(index == arr.length - 1){ index = 0; }else{ index ++; } Img.src = 'img/' + arr[index]; Ocont.onmouseenter = function(){obtn.style.display = 'block'; oSub.style.display = 'block'; clearInterval(timer); Function (){var Img = document.getelementById ('round'); if(index == arr.length - 1){ index = 0; }else{ index ++; } Img.src = 'img/' + arr[index]; } oSub.onclick = function(){ var Img = document.getElementById('round'); if(index == arr.length - 1){ index = 0; }else{ index ++; } Img.src = 'img/' + arr[index]; Ocont.onmouseleave = function(){obtn.style. display = 'none'; oSub.style.display = 'none'; autoPlay(); } </script> </body> </html>Copy the code