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

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

如图

半铸钢钢性铸铁(铸造半钢)代码：

样式类型='text/css ' .车身{ width :524 pxborder : solid 1px # 666左边距左：auto右边距：汽车；} .BG {底色： # E0e0e 0；高度：20 px边框-顶部：实心1px # B4B 4；} .number { font-size : 14px字体粗细：粗体；颜色： # FFF；背景色-颜色： # 9e2e 07显示器：块；border: 1px固体# FFF；宽度：18 px高度：18像素文本对齐：中心；边距-左侧：10 px光标：指针指针；float:left}。number over { color : # 8c 2806 font-size :14 px；宽度宽度：280像素背景色： # FFF；文本对齐：居中；float:leftdisplay:块；边距-左侧：10 px}.主{宽度：95%；左边距左：auto右边距：汽车；} .left _ indent { padding-left :20 px；} .红色{ color: # F00} /styleHTML代码：

div class=' body ' img src=' http : ad-01。jpg ' width=' 524 ' height=' 190 '边框=' 0 ' alt='广告图片id=' rotor ' 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 js代码：

脚本类型=' text/JavaScript '//JavaScript Document//定义全局变量var title=新数组();标题[0]='1。店庆第一波限时抢购一日三疯!'；标题[1]='2。十年店庆均价场39/99/169专场!'；标题[2]='3。全场69折封顶享当当的超值低价!'；标题[3]='4。店庆钜献海量图书69折封顶；var now帧=1；//最先显示第一张图片var MaxFrame=4；//一共五张图片函数show(D1){ if(Number(D1)){ clear time out(计时器)；//当触动按扭时，清除计时器NowFrame=d1//设当前显示图片} for(var I=1；I(MaxFrame 1)；I){ if(I==now frame){ document。getelementbyid(' Rotator ').src='ad-0' i .jpg '；//显示当前图片文件。getelementbyid(' fig _ ' I).innerHTML=title[I-1]；//显示当前图片对应的标题文件。getelementbyid(' fig _ ' I).类名=' numberOver//设置当前标题的半铸钢钢性铸铁(铸造半钢)样式} else { document。getelementbyid(' fig _ I ').innerHTML=I；文件。getelementbyid(' fig _ ' I).类名=' number } } if(NowFrame==MaxFrame){//设置下一个显示的图片现在帧=1；} else { now frame } } var theTimer=setInterval(' show()'，3000)；//设置定时器，显示下一张图片window.onload=show//页面加载时运行函数show()/脚本以上所述就是本文给大家分享的全部内容了，希望大家能够喜欢。