标签：
图片轮播是很多站点的一个需求，实现图片轮播效果的方法有多种
方法一：(淡入式)
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 width:1000px; 9 height:500px; 10 margin:0 auto; 11 position:relative; 12 } 13 14 .banner { 15 display:block; 16 width: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 width: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 }, 3000);//每3秒后执行一次淡入 86 } 87 88 $(‘.banner‘).hover( 89 //鼠标移入banner时取消循环淡入 90 function () { 91 clearInterval(fade); 92 }, 93 //鼠标移出banner时继续循环淡入 94 function () { 95 fadeLoop(); 96 } 97 ); 98 99 $(‘.bar‘).hover( 100 //鼠标移入bars中的某个bar时显示对应的banner图且置该bar的颜色为黑色，并取消定时循环淡入 101 function (e) { 102 $barImage = ‘#‘ + $(e.target).attr(‘id‘) + ‘Image‘; 103 104 $(‘.banner‘).hide(); 105 $($barImage).fadeIn(); 106 107 $(‘.bar‘).css(‘background-color‘, ‘#B3B9AF‘); 108 $(e.target).css(‘background-color‘, ‘black‘); 109 110 clearInterval(fade); 111 }, 112 //鼠标移出bars中的某个bar时继续定时循环淡入 113 function () { 114 fadeLoop(); 115 } 116 ); 117 118 //执行循环淡入 119 fadeLoop(); 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 src="images/banner1.jpg" id="bar1Image" class="banner" /> 132 <img src="images/banner2.jpg" id="bar2Image" class="banner" /> 133 <img src="images/banner3.jpg" id="bar3Image" class="banner" /> 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>
标签：
原文地址：http://www.cnblogs.com/ArisLoong/p/4945760.html
