c语言中数组与图片的转换,JS数组实现图片切换

最新推荐文章于 2024-06-23 19:41:13 发布

kary lee

最新推荐文章于 2024-06-23 19:41:13 发布

阅读量1.2k

点赞数

文章标签： c语言中数组与图片的转换

在本节教程，我们将使用图片切换这个实用的案例来演示数组的应用。在该示例中，我们将图片切换需用到的各个图片的路径存在数组中，在切换图片时使用数组和下标来引用对应的图片。另外，我们还应用了数组的 length 属性来获取当前显示的图片在数组中的第几张。

【例 1】数组在图片切换中的应用。

数组在图片切换中的应用

#content{

width:400px;

height:400px;

border:10px solid #ccc;

margin:40px auto 0;

position:relative;

background:#f1f1f1;

}

#content a{

width:40px;

height:40px;

border:5px solid #ccc;

position:absolute;

top:175px; /*链接与图片垂直居中*/

text-align:center;

text-decoration:none;

line-height:40px;

color:#fff;

font-size:30px;

font-weight:bold;

background:#000;

filter:alpha(opacity:50);/*设置向前向后链接的背景为半透明*/

opacity:0.5;

}

#content a:hover{/*鼠标指针移到向前或向后链接上时背景透明度降低*/

filter:alpha(opacity:90);

opacity:0.9;

}

#prev{left:-80px;}

#next{right:-80px;}

#text,#span1{

position:absolute;

left:0;

width:400px;

height:30px;

line-height:30px;

text-align:center;

color:#fff;

background:#000;

filter:alpha(opacity:60);/*设置透明的背景*/

opacity:0.6;

}

#text{/*图片张数显示在左下方*/

margin:0;

bottom:0;

}

#span1{top:0;}/*图片张数显示在左下方*/

#img1{

width:400px;

height:400px;

}

window.onload = function(){

var oPrev = document.getElementById("prev");

var oNext = document.getElementById("next");

var oText = document.getElementById("text");

var oSpan = document.getElementById("span1");

var oImg = document.getElementById("img1");

//使用数组存储切换的图片路径

var imgUrl=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];

//使用数组存储图片描述信息

var imgText = ['可爱的小猫咪','调皮的皮卡丘','呆萌的皮卡丘','超酷的小熊'];

var num = 0;

//初始化图片信息

oImg.src = imgUrl[num];

oText.innerHTML = imgText[num];

oSpan.innerHTML = num+1 + '/' + imgUrl.length;

//单击向前链接事件

oPrev.onclick = function(){

num--;

if(num == -1){//显示第一张图片后再单击向前按钮时将保持显示第一张图片

num = 0;

alert("这是第一张图片");

}

oImg.src = imgUrl[num];

oText.innerHTML = imgText[num];

oSpan.innerHTML = num+1 + '/' + imgUrl.length;

}

//单击向后链接事件

oNext.onclick = function(){

num++

//显示最后一张图片后再单击向后链接时将保持显示最后一张图片

if(num == imgUrl.length){

num = imgUrl.length-1;

alert("这是最后一张图片");

}

oImg.src = imgUrl[num];

oText.innerHTML = imgText[num];

oSpan.innerHTML = num+1 + '/' + imgUrl.length;

}

上述代码运行后首先显示数组中的第一个元素指定的图片，当连续单击向后链接时，图片会按图片数组中指定的顺序依次切换图片，切换到最后一张图片后再单击向后链接时图片停止切换，并弹出提示对话框；当连续单击向前链接时，会在当前图片的基础上，按数组元素的逆序依次切换图片，切换到第一张图片后再单击向前链接时图片停止切换，并弹出提示对话框。

代码在 Chrome 浏览器中的运行结果如图 1～图 4 所示。