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


Posted in Javascript onNovember 29, 2016

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

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

      第1步:简单的布局并设计基本的显示样式;
       第2步:通过js获取相关元素;
       第3步: 通过数组进行图片url和对应文字描述的存储;
       第4步:初始化:包括图片的初始化,显示图片数字以及对应文字的初始化等;
       第5步:点击按钮切换图片,编写对应的函数,其实就是数组的简单应用。
       接下来先看看效果图,然后进行对应的代码讲解。

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

实现代码:

<!DOCTYPE html> 

<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>图片切换</title> 
 <style> 
 .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; 
 } 
 </style> 
 <script> 
 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(); 
 }; 
 }; 
 </script> 
</head> 
<body> 
 <div class="box"> 
 <a id="prev" href="javascript:;"> < </a> 
 <a id="next" href="javascript:;"> > </a> 
 <p id="text">图片正在加载中……</p> 
 <span id="num">数量正在统计中……</span> 
 <img id="img1" src="../images/1.jpg" alt=""> 
 </div> 
</body> 
</html>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
vue中如何自定义右键菜单详解
Dec 08 Vue.js
JS插件plupload.js实现多图上传并显示进度条
Nov 29 #Javascript
文件上传插件SWFUpload的使用指南
Nov 29 #Javascript
jquery结合html实现中英文页面切换
Nov 29 #Javascript
基于Three.js插件制作360度全景图
Nov 29 #Javascript
jquery购物车结算功能实现方法
Oct 29 #Javascript
JavaScript微信定位功能实现方法
Nov 29 #Javascript
jQuery中的select操作详解
Nov 29 #Javascript
You might like
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
jquery插件之easing使用
2010/08/19 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python多线程爬虫简单示例
2016/03/04 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
浅谈python标准库--functools.partial
2019/03/13 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
大学生个人求职信
2014/06/02 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫
Hive HQL支持2种查询语句风格
2022/06/25 数据库
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技