基于javascript实现样式清新图片轮播特效

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：948 次日期：2016-07-14 16:55:20

温馨提示：小编为您整理了“基于javascript实现样式清新图片轮播特效”,方便广大网友查阅！

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

一、实现效果

如上图：

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

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

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

二、代码

<!DOCTYPE html>

<html>

<title>带小图标的JS图片轮换</title>

margin: 0px;

padding: 0px;

}

#content{

width: 700px;

height: 538px;

margin: 0px auto; /*使所有内容居中*/

border: solid #F0F0F0;

}

/*定义下面小图标处样式*/

#nav1 table{

width: 100%;

height: 35px;

margin-top: -4px;

}

#nav1 td{

width: 35px;

height: 35px;

text-align: center; /*文字居中*/

color: #ffffff;

}

#text{

}

#_text{

width: 100%;

height: 100%;

background-color: #F0F0F0;

border: none;

text-align: center;

font-size: 18px;

color: #000000;

font-weight: bold;

}

</style>

</head>

</div>

<tr>

</tr>

</table>

</div>

//将轮换的大图片放入数组中

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"; //小图标边框样式取消

}

</script>

</body>

</html>

三、多张图片轮换调试笔记

js源代码：

//实现几张图片的轮换

var num = 0; //显示的图片序号，刚开始时是第一张图片

function changeImg1() {

var arr = new Array();

arr[0]="../images/hao123/7.jpg";

arr[1]="../images/hao123/8.jpg";

arr[2]="../images/hao123/9.jpg";

var photo = document.getElementById("topPhoto");

if (num == arr.length - 1) num = 0; //如果显示的是最后一张图片，则图片序号变为第一张的序号

else num += 1; //图片序号加一

photo.src = arr[num];

}

setInterval("changeImg1()",5000); //每隔5000毫秒调用一次changImg1()函数

HTML代码：

在使用的时候最好定义一下图片的样式，把图片的长宽都统一，这样图片动态显示的效果会更好一些。

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

上一篇：javascript实现数字倒计时特效

下一篇：网页中JS函数自动执行常用三种方法

手机网站地址：基于javascript实现样式清新图片轮播特效

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！