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<imgData.length;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]+"</div> ";
wordHtml+=oneWordHtml;
buttonGroupWidth+=35;
var btnBackColor=i==0?"#96d41e":"#267ecf";
imgButtonHtml+="<div onmouseover='clickChangeImg(this)' onmouseout='mousePause(false)' "+preTag+"BtnId='"+i+"' id='"+preTag+"imgBtn"+i+"' style='display:inline;cursor:pointer;float:left;margin-left:10px;width:25px;height:8px;background-color:"+btnBackColor+";'></div>";
}
imgButtonHtml="<div style='width:"+buttonGroupWidth+"px;margin:0 auto;'>"+imgButtonHtml+"</div>"
var changeImg=null;
//图片轮换代码
var changeImgTimer=null;
$(function() {
var currentImgIndex=0;
changeImg=function(toImgIndex) {
//if(needChange==false) return;
$(".changeGroupPic").stop();
$("#"+preTag+"imgChange"+currentImgIndex).fadeOut("normal", function(){
document.getElementById(preTag+"wordChange"+currentImgIndex).style.display="none";
$("#"+preTag+"imgBtn"+currentImgIndex).css("background-color","#267ecf");
if(toImgIndex==null){
if(currentImgIndex>=imgData.length-1){
currentImgIndex=0;
}else{
currentImgIndex++;
}
}else{
currentImgIndex=toImgIndex;
}
$("#"+preTag+"imgBtn"+currentImgIndex).css("background-color","#96d41e");
document.getElementById(preTag+"imgChange"+currentImgIndex).style.display="block";
document.getElementById(preTag+"wordChange"+currentImgIndex).style.display="block";
});
}
changeImgTimer=window.setInterval(changeImg,5000);
});
//鼠标移动停止切换
function mousePause(bool){
//needChange=bool==true?false:true;
if(changeImgTimer){
window.clearInterval(changeImgTimer);
changeImgTimer=null;
}else{
changeImgTimer=window.setInterval(changeImg,5000);
}
}
//点击切换
function clickChangeImg(btn){
if(changeImg!=null){
if(changeImgTimer){
window.clearInterval(changeImgTimer);
changeImgTimer=null;
}
changeImg($(btn).attr(preTag+"BtnId"));
}
}
////////////////////////图片轮换结束///////////////////////////
2.html代码
<div style="width:335px; height:285px; float:left"> <div style="width:100%; height:215px;"> <script>document.write(imgHtml);</script> </div> <div style="width:100%; height:45px; overflow:hidden; padding-top:5px; font-size:15px; color:#326ba0; font-weight:bold"> <script>document.write(wordHtml);</script> </div> <div align="center" style=" text-align:center;width:100%; height:25px; overflow:hidden;padding-top:0px; margin-top:5px; "> <script>document.write(imgButtonHtml);</script> </div> </div>
这个代码分享出来，感觉内心最舒服的了，因为自己写的，自己记录下来也重复用了好几次了，很多时候都用得到，收藏吧，对你有用的！把代码加入到你的网页中看看效果吧！
