html 轮播带标题滚动,JavaScript实现带标题的图片轮播特效

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;

}

HTML代码：

JS代码：

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

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.οnlοad=show; //页面加载时运行函数show()