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

巧用数组制作图片切换js代码

发布于 2017-07-05 07:15:55 | 104 次阅读 | 评论: 0 | 来源: 网友投递

JavaScript客户端脚本语言Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

这篇文章主要为大家详细介绍了巧用数组制作图片切换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的属性内容读写操作。其中需要注意的是，当我们点击下一张到最后一张图片或者点击上一张到第一张时，需要设置具体的数值变化，不=否则会越界，那么图片、数字和对应的问题就没有内容。

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

相关阅读:

巧用数组制作图片切换js代码

灵活使用数组制作图片切换js实现

基于javascript数组实现图片轮播

js二维数组排序的简单示例代码

纯js实现背景图片切换效果代码

JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法)

alert出数组中的随即值代码

两个数组去重的JS代码

鼠标滑在标题上显示图片的JS代码

在页面预览客户端本地图片的js代码(兼容FF IE)

客户端限制只能上传jpg格式图片的js代码

javascript Array数组对象的扩展函数代码