标签：
图片轮播，在一些购物网站上运用的不胜枚举，下面简单介绍一下图片轮播的实现。
如图
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>图片乱拨</title> <style type="text/css"> .body{ width:524px; border:solid 1px #666; margin-left:auto; margin-right:auto; } .bg{ background-color:#E0E0E0; height:20px; border-top:solid 1px #B4B4B4; } .number{ font-size: 14px; font-weight: bold; color: #FFF; background-color: #9E2E07; display: block; border: 1px solid #FFF; width:18px; height:18px; text-align: center; margin-left:10px; cursor:pointer; float:left; } .numberOver{ color:#8C2806; font-size:14px; width:280px; background-color:#FFF; text-align:center; float:left; display: block; margin-left:10px; } .main{ width:95%; margin-left:auto; margin-right:auto; } .left_indent{ padding-left:20px; } .red{ color:#F00; } </style> </head> <body> <div class="body"><img src="ad-01.jpg" width="524" height="190" border="0" alt="广告图片" id="Rotator"> <div class="bg"> <div class="number" id="fig_1" onclick="show(1);">1</div> <div class="number" id="fig_2" onclick="show(2);">2</div> <div class="number" id="fig_3" onclick="show(3);">3</div> <div class="number" id="fig_4" onclick="show(4);">4</div> </div> </div> </body> <script type="text/javascript"> // JavaScript Document //定义全局变量 var title=new Array(); title[0]="1.店庆第一波 限时抢购 一日三疯！"; title[1]="2.十年店庆均价场 39/99/169专场！"; title[2]="3.全场69折封顶 享当当的超值低价！"; title[3]="4.店庆钜献 海量图书69折封顶"; var NowFrame = 1; //最先显示第一张图片 var MaxFrame = 4; //一共五张图片 function show(d1) { if(Number(d1)){ clearTimeout(theTimer); //当触动按扭时，清除计时器 NowFrame=d1; //设当前显示图片 } for(var i=1;i<(MaxFrame+1);i++){ if(i==NowFrame){ document.getElementById("Rotator").src ="ad-0"+i+".jpg"; //显示当前图片 document.getElementById("fig_"+i).innerHTML=title[i-1]; //显示当前图片对应的标题 document.getElementById("fig_"+i).className="numberOver"; //设置当前标题的CSS样式 } else{ document.getElementById("fig_"+i).innerHTML=i; document.getElementById("fig_"+i).className="number"; } } if(NowFrame == MaxFrame){ //设置下一个显示的图片 NowFrame = 1; } else{ NowFrame++; } } var theTimer=setInterval(‘show()‘, 3000); //设置定时器，显示下一张图片 window.onload=show; //页面加载时运行函数show() </script> </html>
标签：
原文地址：http://www.cnblogs.com/wlx520/p/4500146.html
