本文实例为大家分享了javascript实现图片轮播特效，供大家参考，具体内容如下

一、实现效果

如上图：

　　1、图片自动依次轮换，每轮换到一张图片，下面对应的小图标出现红色边框，并显示对应的图片名称

　　2、鼠标放到大图片上面的时，图片停止轮换，一直显示当前图片；鼠标移开后图片继续轮换

　　3、鼠标移到小图标上时，大图片区域会显示对应的大图；鼠标移开则从当前图片开始继续轮换

二、代码

<script type="text/javascript">
//将轮换的大图片放入数组中
var arr = new Array();
arr[0] = "../images/textPhoto/1.jpg";
arr[1] = "../images/textPhoto/2.jpg";
arr[2] = "../images/textPhoto/3.jpg";
arr[3] = "../images/textPhoto/4.jpg";
arr[4] = "../images/textPhoto/5.jpg";

//将input区域变换的文字放在数组里
var text = new Array();
text[0] = "焦点图1";
text[1] = "焦点图2";
text[2] = "焦点图3";
text[3] = "焦点图4";
text[4] = "焦点图5";

var smallImg = document.getElementsByClassName("sImg"); //将页面上所有小图片存放在一个数组

var num = 0;
function changeImg() {
document.getElementById("_photoes").src = arr[num];
document.getElementById("_text").value = text[num];
//当前小图标增加边框样式
for(var i=0;i<arr.length;i++) {
if(i==num) smallImg[num].style.border = "red solid"; //大图标对应的小图标增加边框样式
else smallImg[i].style.border = "none";
}
if (num == arr.length - 1) num = 0; //如果显示的是最后一张图片，则图片序号变为第一张的序号
else num += 1; //图片序号加一
}

var setID = setInterval("changeImg()",1000); //这样写任然会不断调用changeImg()函数

/当鼠标滑到大图标上时/
function over1() {
clearInterval(setID); //图片停止轮换
// smallImg[n-1].style.border = "red solid";
}

/当鼠标离开大图标时/
function out1() {
setID = setInterval("changeImg()",1000); //图片继续轮换
// smallImg[n-1].style.border = "none"; //大图标对应的小图标边框样式取消
}

/当鼠标滑到小图标上时/
function over2(n) {
document.getElementById("_photoes").src = arr[n-1]; //只要鼠标滑到小图标上，大图区域就显示对应的图片
document.getElementById("_text").value = text[n-1];
clearInterval(setID); //图片停止轮换
//当前小图标增加边框样式
for(var i=0;i<arr.length;i++) {
if(i==n-1) smallImg[n-1].style.border = "red solid";
else smallImg[i].style.border = "none";
}
}

/当鼠标离开小图标时/
function out2(n) {
if(n!=arr.length)
num = n; //从当前图片开始轮换
else num = 0;
setID = setInterval("changeImg()",1000); //图片继续轮换
// smallImg[n-1].style.border = "none"; //小图标边框样式取消
}