巧用数组制作图片切换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 实现TreeView CheckBox全选效果
Jan 11 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
Json对象替换字符串占位符实现代码
Nov 17 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
js new Date()实例测试
Oct 31 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
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加密扩展库Mcrypt安装和实例
2013/11/10 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
JS中的BOM应用
2018/02/02 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
Python深入学习之上下文管理器
2014/08/31 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
python实现简单的文字识别
2018/11/27 Python
Python Pandas 箱线图的实现
2019/07/23 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
农民入党思想汇报
2014/01/03 职场文书
学生出入校管理制度
2014/01/16 职场文书
美国留学经济担保书
2014/05/20 职场文书
运动会宣传口号
2014/06/09 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL