html照片轮转播放原理,javascript图片循环轮换播放代码案例

javascript图片循环轮换播放代码案例，我自己写的，javascript图片循环轮换播放代码，用了好几次了，下面分享给大家，可以直接使用的代码。

实现功能：

javascript实现图片循环轮播，有图片，文字和标记按钮，隔5秒图片渐变显示下一张图片，里面的文字跟着切换，小按钮一起切换，鼠标放在哪个小按钮上就显示指定的图片，图片数据都是存在javascript数组的。

废话不多说上代码，你就懂了。

1.javascript代码

图片轮换开始///var preTag="imgGroup";//组件标示

var needChange=true;

//图片数据

var imgData=[

["img/news/1.jpg","崔丽副主任出席2014年爱在阳光下北戴河儿童夏令营开营仪式"],

["img/news/2.jpg","2222222222222222222222222222222222222222222222222222222222光下北戴河儿童夏令营开营仪式"],

["img/news/3.jpg","333333333333333333333333333333333333333333333333333333333333光下北戴河儿童夏令营开营仪式"]

];

var imgHtml="";

var wordHtml="";

var imgButtonHtml="";

var buttonGroupWidth=0;

for(var i=0;i

var display=i==0?"":"display:none;";

var+display+"' id='"+preTag+"imgChange"+i+"' src='"+imgData[i][0]+"'>";

imgHtml+=oneImgHtml;

var+display+"' id='"+preTag+"wordChange"+i+"'>"+imgData[i][1]+"