方法一：(淡入式)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript" src="JS/jquery-1.11.3.js"></script> 6 <style type="text/css"> 7 #banners { 8 1000px; 9 height:500px; 10 margin:0 auto; 11 position:relative; 12 } 13 14 .banner { 15 display:block; 16 1000px; 17 height:500px; 18 position:absolute; 19 } 20 21 #bars { 22 display:table; 23 margin:0 auto; 24 } 25 26 .bar { 27 display:inline-block; 28 40px; 29 height:6px; 30 margin:0 5px; 31 background-color:#B3B9AF; 32 } 33 </style> 34 35 <script type="text/javascript"> 36 window.onload = function () { 37 $(function () { 38 var banners = document.getElementsByClassName("banner"); 39 var bannersLength = banners.length; 40 var bars = document.getElementsByClassName("bar"); 41 //定义一个定时循环淡入的指示器，方便后面取消定时循环淡入 42 var fade; 43 44 //依次设置banner的堆叠层次,此处"堆叠增量"为1(且从1开始堆叠) 45 for (var i = 0; i < bannersLength; i++) { 46 $(banners[i]).css("z-index", (i + 1)); 47 } 48 49 //设置初始时的可见banner及其对应bar的指示色 50 for (var i = 0; i < bannersLength; i++) { 51 if (i == 0) { 52 $(banners[i]).css("display", "block"); 53 $(bars[i]).css("background-color", "black"); 54 } else { 55 $(banners[i]).css("display", "none"); 56 } 57 } 58 59 //定时循环淡入，fadeLoop只是对定时循环淡入的封装，方便后面调用 60 function fadeLoop() { 61 fade = setInterval(function () { 62 for (var i = 0; i < bannersLength; i++) { 63 if ($(banners[i]).css("display") == "block") { 64 //使用模运算，实现周期性循环回归; fadeIndex指示要淡入的对象 65 var fadeIndex = (i + 1) % bannersLength; 66 $(banners[fadeIndex]).fadeIn(3000); 67 68 //设置已淡入对象的可见性 69 $(banners[fadeIndex]).css("display", "block"); 70 //设置已淡入对象对应bar的指示色 71 $(bars[fadeIndex]).css("background-color", "black"); 72 73 for (var j = 0; j < bannersLength; j++) { 74 //设置未淡入对象的可见性及其对应bar的指示色 75 if (j != fadeIndex) { 76 $(banners[j]).css("display", "none"); 77 $(bars[j]).css("background-color", "#B3B9AF"); 78 } 79 } 80 81 //一旦for循环里的if条件得到满足，则使用break语句结束循环(也将结束包裹for循环的匿名函数) 82 break; 83 } 84 } 85 }, 5000); 86 } 87 88 //执行循环淡入 89 fadeLoop(); 90 91 $('.banner').hover( 92 //鼠标移入banner时取消循环淡入 93 function () { 94 clearInterval(fade); 95 }, 96 //鼠标移出banner时继续循环淡入 97 function () { 98 fadeLoop(); 99 } 100 ); 101 102 $('.bar').hover( 103 //鼠标移入bars中的某个bar时显示对应的banner图且置该bar的颜色为黑色，并取消定时循环淡入 104 function (e) { 105 $barImage = '#' + $(e.target).attr('id') + 'Image'; 106 107 $('.banner').hide(); 108 $($barImage).fadeIn(); 109 110 $('.bar').css('background-color', '#B3B9AF'); 111 $(e.target).css('background-color', 'black'); 112 113 clearInterval(fade); 114 }, 115 //鼠标移出bars中的某个bar时继续定时循环淡入 116 function () { 117 fadeLoop(); 118 } 119 ); 120 }); 121 } 122 </script> 123 </head> 124 <body> 125 <div id="section1"> 126 <div id="banners"> 127 <!-- 128 每一个banner的id属性中的数字与其所对应的bar的id属性中的数字一致 129 (该数字由可后端生成<在HTML的id属性层面使用数字进行元素关联>) 130 --> 131 <img id="bar1Image" class="banner" src="images/banner1.jpg" /> 132 <img id="bar2Image" class="banner" src="images/banner2.jpg" /> 133 <img id="bar3Image" class="banner" src="images/banner3.jpg" /> 134 </div> 135 <div id="bars"> 136 <span id="bar1" class="bar"></span> 137 <span id="bar2" class="bar"></span> 138 <span id="bar3" class="bar"></span> 139 </div> 140 </div> 141 </body> 142 </html>
方法二：简单回归循环
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>图片轮播</title> 6 <script type="text/javascript"> 7 var curIndex = 0; 8 var timeInterval = 3000; 9 10 var arr = new Array(); 11 arr[0] = "1.png"; 12 arr[1] = "2.png"; 13 arr[2] = "3.png"; 14 arr[3] = "4.png"; 15 arr[4] = "5.png"; 16 17 function changeImg() { 18 var obj = document.getElementById("obj"); 19 if (curIndex == arr.length - 1) { 20 curIndex = 0; 21 } else { 22 curIndex++; 23 } 24 obj.src = arr[curIndex]; 25 } 26 27 setInterval(changeImg, timeInterval); 28 </script> 29 </head> 30 <body> 31 <img id="obj" src="1.png" /> 32 </body> 33 </html>