JavaScript实现带标题的图片轮播特效

图片轮播，在一些购物网站上运用的不胜枚举，下面简单介绍一下图片轮播的实现。
如图

CSS代码：

 <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>

HTML代码：

 <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>

JS代码：

 <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>

以上所述就是本文给大家分享的全部内容了，希望大家能够喜欢。