js吧html中的图片改为数组图片,巧用数组制作图片切换js代码

在前面的文章中，我们讲到了js中数组的具体操作，详见(Js对Array的各种操作总结)，这里就不再做详细的讲解。今天主要的目的是如何用数组进行图片的简单左右切换。

本文中的图片切换具体步骤如下：

第1步：简单的布局并设计基本的显示样式；

第2步：通过js获取相关元素；

第3步： 通过数组进行图片url和对应文字描述的存储；

第4步：初始化：包括图片的初始化，显示图片数字以及对应文字的初始化等；

第5步：点击按钮切换图片，编写对应的函数，其实就是数组的简单应用。

接下来先看看效果图，然后进行对应的代码讲解。

实现代码：

图片切换

.box{

width: 600px;

height:400px;

border: 10px solid #ccc;

position: relative;

margin: 40px auto 0;

}

.box a{

width: 30px;

height: 30px;

background-color: #000;

border: 5px solid #fff;

position: absolute;

top:180px;

text-align: center;

font-size:25px;

font-weight: bold;

line-height: 30px;

color:#fff;

text-decoration: none;

filter: alpha(opacity:40);

opacity: 0.4;

}

.box a:hover{

filter:alpha(opacity:80);

opacity:0.8;

}

.box #prev{

left: 10px;

}

.box #next{

right: 10px;

}

#text,#num{

height: 30px;

line-height:30px;

width: 600px;

color:#fff;

position: absolute;

left: 0;

background-color: #000;

text-align: center;

filter: alpha(opacity:80);

opacity: 0.8;

margin:0;

}

.box #text{

bottom: 0;

}

.box #num{

top:0;

}

.box #img1{

width: 600px;

height: 400px;

}

window.onload = function () {

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

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

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

var oNum = document.getElementById("num");

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

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

var arrText = ['文字1','文字2','文字3','文字4'];

//初始化

var num = 0;

function fnTab(){

oNum.innerHTML = num + 1 + '/' + arrText.length;

oImg.src = arrUrl[num];

oText.innerHTML = arrText[num];

};

fnTab();

oPrev.onclick = function(){

num --;

if( num == -1){

num = arrUrl.length -1;

}

fnTab();

};

oNext.onclick = function(){

num ++;

if(num == arrUrl.length){

num = 0;

}

fnTab();

};

};

<

>

图片正在加载中……

数量正在统计中……

这个例子很简单，主要就是对数组的简单读写以及对html的属性内容读写操作。其中需要注意的是，当我们点击下一张到最后一张图片或者点击上一张到第一张时，需要设置具体的数值变化，不=否则会越界，那么图片、数字和对应的问题就没有内容。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。