<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .imgbox { width: 100%; height: 400px; position: relative; top: 20px; left: 15px; } img { opacity: 0; position: absolute; max-height: 400px; max-width: 300px; } </style> </head> <body> <div class="imgbox" id="imgbox"> <img src="img/19.jpg" style="opacity: 1;" alt="" /> <img src="img/20.jpg" alt="" /> <img src="img/21.jpg" alt="" /> <img src="img/22.jpg" alt="" /> <img src="img/23.jpg" alt="" /> <img src="img/24.jpg" alt="" /> </div> <input type="button" value="切换" onclick="change()" /> <script> //全局地址 var index = 0; function change() { //得到所 有图片长度 var imgs = document.getElementsByTagName("img").length; var next = index + 1; if (index == imgs - 2) { //imgs-1为长度（从0开始）；imgs-2为index（next+1） next = 0; } //得到所有图片元素 var img = document.getElementById("imgbox").children; img[index].style.opacity = 0; img[next].style.opacity = 1; index = next; console.log(index); } window.setInterval("change()", 2000); </script> </body> </html>
原文：http://www.cnblogs.com/firefly-pengdan/p/5641768.html