这个是偶实现的方法
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>最简单的多图切换</title> <link rel="stylesheet" href="base.css" /> <style> .banner{ width: 200px; height: 120px; margin: 80px auto 0 auto;} </style> <script type="text/javascript" src="jquery-1.10.1.min.js" ></script> </head> <body> <div class="banner"> <img src="img/aaa.png" id="slide" width="200" height="120"> </div> <script> $(function() { simpleSlide(); }); function simpleSlide(){ var index = 0; var arr = ['aaa.png', 'bbb.png', 'ccc.png']; setInterval(function(){ index == (arr.length - 1) ? index = 0 : index ++; $("#slide")[0].src = 'img/' + arr[index]; }, 4000); } </script> </body> </html>
结果群友(大树)实现了更简单的方法
function simpleSlide(){ var index = 0; var arr = ['aaa.png', 'bbb.png', 'ccc.png']; setInterval(function(){ index++; $("#slide")[0].src = 'img/' + arr[index%arr.length]; }, 4000); }
效果图: